css之浮動布局
本人博客：查看文章
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>
圖一：原始圖
圖二：child-1 和 child-2 進行浮動
圖三:區分清除浮動與閉合浮動（個人理解：在外面解決問題，內部問題未解決）
清除浮動：對box2使用：clear：both
圖四：閉合浮動（在內部解決問題：同時解決外部問題）
閉合浮動：對box1使用overflow：hidden（其中一種方式，后面還有更好的方式）
因此我更願意稱其為閉合浮動:其實也可以叫清除浮動，不過我就是覺得閉合浮動比較形象。
6.閉合浮動方法(常見的幾個方法)：既然浮動帶來這些不利的影響，我們就要想辦法清除它。
其一：通過在浮動元素的末尾添加一個空元素，設置 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>
其二：通過設置父元素 overflow 或者display：table 屬性來閉合浮動，給box1添加overflow：hidden
其三（推薦）：使用偽元素：after,下面是代碼，給box1添加上clearfloat這class即可
/*適配ie6*/ .clearfloat{ zoom:1; } .clearfloat:after{ display:block; height:0; content:""; clear:both; visibility:hidden; }
以上寫出個人對浮動的理解，如有錯誤，歡迎指出
作者：Ry-yuan
如需轉載請標明出處：原文地址：http://www.cnblogs.com/Ry-yuan/p/6816290.html