什么是浮動元素
浮動元素會根據(jù)屬性值向左或向右浮動，浮動元素會脫離普通文檔流，進(jìn)入浮動流量没，浮動流內(nèi)的浮動元素可以左右移動，直至外邊緣碰到包含塊或其他浮動元素突想，會使得塊級元素?zé)o視浮動元素且行內(nèi)元素環(huán)繞浮動元素
- 觀察幾種浮動實例
<div class="container">
<div class="box1">float1</div>
<div class="box2">float2</div>
</div>
1.box1,box2全部左浮
image.png
2.box1,box2全部右浮
image.png
3.box2左浮
image.png
4.文字環(huán)繞
<div class="box">
<div class="img"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</div>
image.png
清除浮動
- 為什么需要清除浮動呢殴蹄？
因為浮動元素的特性，有時候會帶來一些問題
比如：margin重疊猾担；無法撐開父元素高度袭灯；與浮動元素同級的非浮動元素會緊隨其后，因為浮動元素脫離文檔流绑嘹，不占據(jù)文檔流中的位置稽荧；可能影響頁面結(jié)構(gòu)等 - 清除浮動的方式
1.BFC
margin重疊場景
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
.box1 {
width: 100px;
height: 100px;
margin-bottom: 100px;
background-color: rgb(182, 46, 46);
}
.box2 {
width: 100px;
height: 100px;
margin-top: 200px;
background-color: rgb(39, 153, 66);
}
image.png
box1的margin-bottom為100px,box2的margin-top為200px，總margin應(yīng)為300px,但現(xiàn)在只有200px工腋，我們發(fā)現(xiàn)發(fā)生了margin重疊的問題姨丈，怎么解決呢，我們可以創(chuàng)建一個BFC,BFC就是頁面上的一個獨立容器擅腰，容器里面的子元素不會影響外面元素蟋恬，同樣外面的元素不會影響到BFC內(nèi)的元素,我們讓box1處于一個BFC中
解決：
<div class="box">
<div class="box1"></div>
</div>
.box {
overflow: hidden; /* 創(chuàng)建一個bfc */
}
image.png
2.clear屬性的空標(biāo)簽(不推薦使用)
//css
.box1,.box2,.box3 {
float: left;
}
.box {
width: 300px;
border: 5px solid #000;
}
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
image.png
在浮動元素后面設(shè)置一個空標(biāo)簽，并設(shè)置
clear: both;
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="clear"></div>
</div>
//css
.clear {
clear: both;
}
image.png
原理：添加一個空標(biāo)簽趁冈，利用CSS提高的clear:both清除浮動歼争，讓父元素可以自動獲取到高度
優(yōu)點：簡單拜马，代碼少，兼容所有瀏覽器
缺點：增加頁面的標(biāo)簽沐绒，造成結(jié)構(gòu)的混亂
3.:after偽元素
給浮動元素的容器添加一個clearfix的class俩莽，然后給這個class添加一個:after偽元素實現(xiàn)元素之后添加一個看不見的塊元素清理浮動
<div class="box clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
//css
.clearfix::after {
content: '';
display: block;
clear: both;
}
image.png
