浮動(dòng)(CSS float 屬性)
首先浮動(dòng)這個(gè)概念是CSS1中提出的扳剿，浮動(dòng)不完全是定位叫挟，但他也不是normal flow艰匙。
我認(rèn)為浮動(dòng)的元素會(huì)變成一個(gè)屬于自己的流,就好像小弟不跟大哥了,自己成立新幫派一樣.
值: left | right | none | inherit
默認(rèn)值: none
應(yīng)用: 所有元素
繼承性: 無
為什么清除浮動(dòng)元素(使用了CSS float屬性的元素)
<b>在元素中，如果父元素的高度是由內(nèi)部元素?fù)纹鸬哪遥@個(gè)內(nèi)部元素又進(jìn)行了浮動(dòng)（脫離常規(guī)流）员凝，就會(huì)發(fā)生父元素高度塌陷的問題。而為了解決這種問題奋献，就要清除浮動(dòng)健霹。</b>
比如我們想把這三個(gè)塊級(jí)元素用float實(shí)現(xiàn)類似inline-block的正常流的效果.
3.png
想要實(shí)現(xiàn)的效果
2.png
實(shí)際效果,用float,父元素高度會(huì)塌陷
1.png
一.利用clear解決問題
看下圖的代碼,我在parent里內(nèi)容元素的最后面添加了一個(gè)空的div,樣式屬性設(shè)置了clear:both;<b>父容器發(fā)現(xiàn)了樣式為clear:"both"的div元素,定義了這個(gè)div兩側(cè)不浮動(dòng),既然兩側(cè)不能出現(xiàn)浮動(dòng)元素,那么該div需要換行.而父元素要確保它能夠換行就要包含浮動(dòng)元素的高度,讓它有足夠的空間.</b>
4.png
二.:after(偽類選擇器)
為parent追加一個(gè)偽類元素,原理和添加空元素差不多
.parent:after{
content:"";
display:table;
clear:both;
}
三.BFC(Block Formatting Context)
<b>每一個(gè)元素,都有一個(gè)叫BFC的隱藏屬性
開啟BFC的元素會(huì)有如下特性</b>
- 父元素的垂直外邊距不會(huì)和子元素重疊
- BFC元素不會(huì)被浮動(dòng)元素覆蓋
- BFC元素可以包含浮動(dòng)子元素
<b>怎么開啟BFC</b>
- 設(shè)置元素浮動(dòng)
- 使用這種元素雖然可以撐開父元素,但是會(huì)導(dǎo)致父元素寬度丟失.
- 這種方式也會(huì)導(dǎo)致下邊元素上移
- 設(shè)置元素絕對(duì)定位
- 和第一種一樣不推薦
- 設(shè)置元素為inline-block
- 直接設(shè)置會(huì)和第一種一樣,也會(huì)導(dǎo)致寬度丟失
- 設(shè)置overflow,將overflow的值設(shè)置成非visible的值
- 推薦將overflow的值設(shè)置為hidden,它是副作用最小的
