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