在開發(fā)中，水平方向用浮動流布局纸俭，垂直方向用標準流布局
浮動元素不會覆蓋住沒有浮動元素的格式
浮動元素的寬度問題：
- 在標準流中橄唬，內(nèi)容的高度可以撐起父容器的高度仁热。
- 一個浮動元素，浮動的元素撐起父元素的高度渠缕。
清除浮動方式：保證后面一個盒子里面的浮動元素不會去找前面盒子的浮動元素鸽素。
1、給前一個父容器設置高度亦鳞，在開發(fā)中盡量不寫高度馍忽。
2、給第二個元素容器設置一個 clear 屬性
{clear: none(默認) / left(不找前面的左浮動元素) / both(不找前面的左和右浮動元素) / right(不找前面的右浮動元素)
{clear:both;}
注意：當給某個屬性添加 clear 屬性之后燕差，此元素的 margin 屬性應付失效遭笋。本質(zhì)原因是它的父元素沒有設置邊框。
3徒探、隔墻法：額外添加一個塊級元素瓦呼，由于是通過HTML代碼來修改CSS，所以不推薦使用测暗。
- 外墻法：在box1和box2之間添加一個塊級元素(一道外墻)央串，給塊級元素設置一個{clear:both;}
.wall {clear:both;} // 設置不找左右元素浮動
<div class="wall"></div> // 設置一道外墻
注意：外墻法可以讓box2設置margin-top，不能設置box1的margin-bottom偷溺，可以設置外墻的高度來設置間隙蹋辅。
-內(nèi)墻法：在box1中的最后一個子元素后面添加一個塊級元素(一道內(nèi)墻)，給塊級元素設置一個{clear:both;}
.wall {clear:both;} // 設置不找左右元素浮動
<div class="wall"></div> // 設置一道內(nèi)墻
注意：內(nèi)墻法可以讓box2設置margin-top挫掏，可以設置box1的margin-bottom侦另，可以設置外墻的高度來設置間隙。
- 外墻和內(nèi)墻的區(qū)別：內(nèi)墻可以撐起第一個盒子的高度，外墻不能撐起一個盒子的高度褒傅，在開發(fā)中不常用隔墻法來清除浮動弃锐。
偽元素選擇器：利用CSS代碼，給指定標簽的內(nèi)容前面添加子元素殿托、給指定標簽 內(nèi)容后面添加子元素霹菊。
格式：
標簽 #id .類名::before/after {content:"要添加的內(nèi)容";}
-偽元素選擇器清除浮動：
格式：
.topbox1::after {
content: ""; /* 設置元素內(nèi)容為空 /
display: block; / 設置元素為塊級元素 /
height: 0px;
visibility: hidden; / 設置元素不顯示空 /
clear: both; / 設置元素左右不浮動 */
}
注意：偽元素選擇器清除浮動在 IE6 瀏覽器是沒有效果的，兼容問題支竹，由于偽元素是CSS3新增的旋廷，IE6不支持。
解決辦法礼搁，在偽元素清除浮動的下行添加下面的代碼：
.topbox1 {星號zoom:1;} /* 這段代碼是用來兼容IE6的 */
overflow:hidden
1饶碘、可以將超出標簽范圍的內(nèi)容裁剪掉。
2馒吴、可以清除浮動：box1box2
.box1 {overflow:hidden; 星號zoom:1;} 類似內(nèi)墻法扎运，推薦使用
注意：它也有兼容問題，在IE6中無效饮戳，要添加 *zoom:1;
B盒子在A盒子中豪治，如果想給B盒子設置margin-top屬性，又不想給A添加邊框時扯罐，可以在A樣式里面寫上 overflow:hidden 负拟，這樣就能在B盒子里面設置margin-top屬性了。
