css之浮動布局(float,浮動原理,清除/閉合浮動方法)
1.什么是浮動：
在我們布局的時候用到的一種技術，能夠方便我們進行布局，通過讓元素浮動，我們可以使元素在水平上左右移動，再通過margin屬性調整位置。
2.浮動的原理;
使當前元素脫離普通流，相當於浮動起來一樣，浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動的邊緣
3、浮動的生成：
使用css屬性 float：left/right/none左浮動/右浮動/不浮動（默認）
4、浮動的影響：
- 不會影響未浮動的塊級元素布局，但會影響內聯元素的布局
- 浮動后的元素可以設置寬度和高度，也就是說內聯元素浮動后會變成塊級元素，但我更傾向內聯元素與變成inline-block元素，即同時擁有塊級與行內元素的特征
- 因為浮動元素脫離了普通流，會出現一種高度坍塌的現象：原來的父容器高度是當前元素A撐開的，但是當A元素浮動后，脫離普通流浮動起來，那父容器的高度就坍塌（前提是父容器高度小於A元素高度），下面用圖來說明一下：
5.清除浮動與閉合浮動:
先說說我個人的理解：我將解釋一下我理解的閉合浮動與清除浮動
清除浮動：使用clear元素清除外面浮動，解決外面浮動對自己的影響
閉合浮動：當前塊級中，其子元素使用了浮動，會給當前塊內部和塊外部的布局帶來影響，所以當前塊中的浮動閉合，能將影響最大化清除。舉例子：
<style type="text/css"> .box1{ width: 200px; border: 2px solid #0f0; /*overflow: hidden;*/ } .box1 .child-1{ float: left; height: 100px; width: 100px; background: #fd0; } .box1 .child-2{ float: left; height: 100px; width: 100px; background: #fba; } .box2{ width: 200px; height: 150px; border: 2px solid #00f; /* clear: both; */ } </style> <body> <div class="box1"> <div class="child-1">child-1</div> <div class="child-2">child-2</div> </div> <div class="box2"></div> </body>
圖一：
圖二：
圖三：區分清除浮動與閉合浮動（個人理解：在外面解決問題，內部問題未解決） 清除浮動：對box2使用：clear：both
圖四：閉合浮動（在內部解決問題:同時解決外部問題）閉合浮動：對box1使用overflow：hidden（其中一種方式，后面還有更好的方式）
6.閉合浮動方法（常見的幾個）：
1.通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性；
缺點：成本太高，額外添加了一個元素，維護困難
<div class="box1"> <div class="child-1">child-1</div> <div class="child-2">child-2</div> <div style="clear: both;"></div> </div> <div class="box2"></div>
2.通過設置父元素overflow或者display：table屬性來閉合浮動，給box1添加overflow：hidden
3.使用偽元素：after,下面是代碼，給box1添加上clearfloat這class即可
/*適配ie6*/ .clearfloat{ zoom:1; } .clearfloat:after{ display:block; height:0; content:""; clear:both; visibility:hidden; }
轉自：http://ryuan.top/2017/05/10/css%E4%B9%8B%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80/