float的一点想法_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

float的一点想法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

刚写代码的时候，突然有个问题，float加在父级元素上和加在子级元素上有什么区别，还有浮动清除的一些问题

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .main{            width: 1000px;            background-color: bisque;            overflow: hidden;        }        .fl{            float: left;        }        .wh200{            width: 200px;            height: 200px;            margin-left: 20px;            background-color: aqua;        }        .clear{            clear: both;        }        .main2{            width: 1000px;            background-color: blue;            height: 400px;        }    </style></head><body><div class="main">    <div class="fl wh200"></div>    <div class="fl wh200"></div>    <div class="fl wh200"></div></div><div class="main2"></div></body></html>

清楚浮动两种方式

1. 父级加overflow:hidden ;

2. 最后一个子级加clear:both

这里的浮动是加在子级元素上的，并且通过overflow: hidden清楚浮动；如果不加浮动清除，那么main1这个父级div是没有高度的，这会导致main2这个div浮上来，如下效果

还有不存在什么父级元素加了浮动，子级元素也浮动，float:left这个属性加给谁，谁就参与浮动。

总结：

套路框架：第一层：页面整体框架overflow:hidden清除浮动；第二层：就是第一层里面的一些元素，比如header里面的logo,search这些，定义高度就行。

<div style="width: 1000px;overflow: hidden">    <div style="float: left;width: 330px">        <div style="width: 200px;height: 50px"></div>        <div style="width: 130px;height: 50px;"></div>    </div>    <div style="float: left;width: 330px"></div>    <div style="float: left;width: 330px"></div></div><div style="width: 1000px;overflow: hidden">    <div style="float: left;width: 330px"></div>    <div style="float: left;width: 330px"></div>    <div style="float: left;width: 330px"></div></div>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的目的：啟用Web瀏覽器可以顯示內容May 03, 2025 am 12:03 AM

HTML的核心目的在於讓瀏覽器理解並展示網頁內容。 1.HTML通過標籤定義網頁結構和內容，如、到、等。 2.HTML5增強了多媒體支持，引入了和標籤。 3.HTML提供了表單元素，支持用戶交互。 4.優化HTML代碼可提升網頁性能，如減少HTTP請求和壓縮HTML。

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。