這個(gè)單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標(biāo)準(zhǔn)流都可以。
前面我們說(shuō)過(guò)，網(wǎng)頁(yè)布局的核心，就是用CSS來(lái)擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位。
html語(yǔ)言當(dāng)中另外一個(gè)相當(dāng)重要的概念----------標(biāo)準(zhǔn)流！或者普通流。
普通流實(shí)際上就是一個(gè)網(wǎng)頁(yè)內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素會(huì)按順序依次前后排列；按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)例外的情況叫做普通流布局。
浮動(dòng)最早是用來(lái)控制圖片，以便達(dá)到其他元素（特別是文字）實(shí)現(xiàn)“環(huán)繞”圖片的效果。
后來(lái)，我們發(fā)現(xiàn)浮動(dòng)有個(gè)很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動(dòng)的特性來(lái)布局了。
元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)標(biāo)準(zhǔn)流的控制，移動(dòng)到其父元素中指定位置的過(guò)程。
在CSS中，通過(guò)float屬性來(lái)定義浮動(dòng)，其基本語(yǔ)法格式如下：
選擇器{float:屬性值;}
| 屬性值 | 描述 |
|---|---|
| left | 元素向左浮動(dòng) |
| right | 元素向右浮動(dòng) |
| none | 元素不浮動(dòng)（默認(rèn)值） |
浮動(dòng)脫離標(biāo)準(zhǔn)流，脫標(biāo) 不占位置，會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)。
浮： 加了浮動(dòng)的元素盒子是浮起來(lái)的，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。
漏： 加了浮動(dòng)的盒子，不占位置的，它浮起來(lái)了，它原來(lái)的位置漏 給了標(biāo)準(zhǔn)流的盒子。
特： 特別注意，首先浮動(dòng)的盒子需要和標(biāo)準(zhǔn)流的父級(jí)搭配使用， 其次特別的注意浮動(dòng)可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
/*float: left;*/
}
.one {
background-color: pink;
float: left;
}
.two {
background-color: purple;
}
.three {
background-color: skyblue;
float: right;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
https://blog.csdn.net/weixin_45525272/article/details/107086075
我們前面說(shuō)過(guò)，浮動(dòng)本質(zhì)是用來(lái)做一些文字混排效果的，但是被我們拿來(lái)做布局用，則會(huì)有很多的問(wèn)題出現(xiàn)， 但是，你不能說(shuō)浮動(dòng)不好 。
但是由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響，為了解決這些問(wèn)題，此時(shí)就需要在該元素中清除浮動(dòng)。
準(zhǔn)確地說(shuō)，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響
清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問(wèn)題。
其實(shí)本質(zhì)叫做閉合浮動(dòng)更好一些, 記住，清除浮動(dòng)就是把浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來(lái)影響其他元素。
在CSS中，clear屬性用于清除浮動(dòng)，其基本語(yǔ)法格式如下：
在CSS中，clear屬性用于清除浮動(dòng)，其基本語(yǔ)法格式如下：
選擇器{clear:屬性值;} clear 清除
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響） |
| right | 不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響） |
| both | 同時(shí)清除左右兩側(cè)浮動(dòng)的影響 |
是W3C推薦的做法是通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可。
優(yōu)點(diǎn)： 通俗易懂，書(shū)寫(xiě)方便
缺點(diǎn)： 添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差。 我只能說(shuō)，w3c你推薦的方法我不接受，你不值得擁有。（不推薦）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
/*float: left;*/
}
.one {
background-color: pink;
float: left;
}
.two {
background-color: purple;
}
.three {
background-color: skyblue;
float: right;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
可以通過(guò)觸發(fā)BFC的方式，可以實(shí)現(xiàn)清除浮動(dòng)效果。（BFC后面講解）
可以給父級(jí)添加： overflow為 hidden|auto|scroll 都可以實(shí)現(xiàn)。
優(yōu)點(diǎn)： 代碼簡(jiǎn)潔
缺點(diǎn)： 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px;
overflow: hidden;
/*別加錯(cuò)位置了，給 父親加*/
/*不是所有的浮動(dòng)我們都需要清除 ，誰(shuí)影響布局，我們清除誰(shuí)*/
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 180px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
:after 方式為空元素的升級(jí)版，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 專(zhuān)有 */
優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想 結(jié)構(gòu)語(yǔ)義化正確
缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等
注意： content:"" 盡量不帶點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:after { /*正常瀏覽器 清除浮動(dòng)*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*zoom 1 就是ie6 清除浮動(dòng)方式 * ie7一下的版本所識(shí)別*/
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 這句話(huà)可以出發(fā)BFC BFC可以清除浮動(dòng),BFC我們后面講 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點(diǎn)： 代碼更簡(jiǎn)潔
缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 小米、騰訊等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
https://blog.csdn.net/weixin_45525272/article/details/107097972
聯(lián)系客服
