CSS中清除浮動的作用以及如何清除浮動
阿新 • • 發佈：2019-03-22
兩個 標準 img :after spa 區域 image info html 
如果在塊級元素（橙色）下方添加一個兄弟塊級，兩個浮動的圖片也會浮動在它父級元素的兄弟元素上方。
如果父級元素只加寬度不加高度，則父級元素不會顯示（橙色區），隨後設置的兄弟元素會替代前一個元素。
我們想要達到的目的是子元素在父級元素內浮動並且父級元素在未設置高度的時候能夠顯示。所以就要清楚浮動了。
例如：http://www.runoob.com/css/css-float.html
1.什麽是浮動，浮動的作用
“浮動”從字面上來理解就是“懸浮移動、非固定”的意思。塊級元素（div、table、span…）是以垂直方向排列，而在前端界面中往往要使用水平布局塊級元素使界面更美觀。這就要用到浮動了。被設置浮動的元素會脫離標準流（豎直排列），從而達到水平排列的效果。
例如.
未設置浮動時圖1中的兩張圖片豎直排列在父級元素（橙色區域）中。
圖1
給承載圖片的元素設置浮動後，如下圖2顯示
圖2
註：圖1未設置父級元素高度。圖2設置了父級元素的高度。
2.為什麽要清除浮動
未設置浮動時顯示圖1效果。
當父級元素設置的高度小於子級元素（子級浮動）的高度時會出現如下圖3顯示結果。此時設置了浮動的子元素已經脫離了標準流，換句話說就是子元素浮動在父級元素之上了。
如果在塊級元素（橙色）下方添加一個兄弟塊級，兩個浮動的圖片也會浮動在它父級元素的兄弟元素上方。
如果父級元素只加寬度不加高度，則父級元素不會顯示（橙色區），隨後設置的兄弟元素會替代前一個元素。
我們想要達到的目的是子元素在父級元素內浮動並且父級元素在未設置高度的時候能夠顯示。所以就要清楚浮動了。
3.如何清除浮動
方法一，給浮動元素添加一個兄弟元素，兄弟元素的CSS設置clear:both;。
方法二，給浮動元素的父級元素的CSS添加overflow: auto; zoom: 1; //zoom: 1; 出發IE hasLayout。
方法三，
.outer {zoom:1;}
.outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibili ty:hidden;}
例如：http://www.runoob.com/css/css-float.html
CSS中清除浮動的作用以及如何清除浮動