清除浮動
- 課時130 浮動元素高度問題(掌握)
- 課時131 清除浮動方式一(理解)
- 課時132 清除浮動方式二(理解)
- 課時133 margintop失效原因(理解)
- 課時134 清除浮動方式三(理解)
- 課時135 清除浮動方式四(理解)
- 課時136 偽元素選擇器(掌握)
- 課時137 清除浮動方式五(理解)
- 課時138 清除浮動方式六(理解)
浮動元素高度問題
- 在標準流中，內(nèi)容的高度可以撐起父元素的高度
- 在浮動流中，浮動的元素是不可以撐起父元素的高度的
清除浮動方式一
給前一個父元素設置高度
注意點
企開中，能不寫高度就不寫高度，所以這種方式用的很少，不推薦使用
清除浮動方式二
給后面的盒子添加clear屬性
取值
- none 默認取值，按照浮動元素的排序規(guī)則來排序
- left 不要找它前面的左浮動元素
- right 不要找它前面的又浮動元素
- both 不要找它前面的左浮動元素和有浮動元素(企開用的最多)
注意點
為標簽添加clear之后，標簽的margin屬性就失效了
margintop失效原因
當子元素設置margin-top后，它前一個元素已經(jīng)浮動了，他按理說是應該頂著body下移，但是body是不會動的，只要你給body加個border，然后margin-top大于它上一個元素的高，那就何以實現(xiàn)當前子元素的下移，但企開中，沒人會給body加邊框的，加邊框僅僅作為理解
清除浮動方式三
即隔墻法
1. 外墻法
在兩個盒子中間添加一個塊級元素，然后為其設置clear:both
注意點
- 外墻法能讓第二個盒子用margin-top屬性，但不能讓第一個盒子使用margin-bottom屬性
- 在企開中，我們要是想讓上下兩個盒子隔開的話，都是給我們添加的那個塊級元素設置高度就行
2. 內(nèi)墻法
在第一個盒子中所以子元素最后添加一個塊級元素，然后為其設置clear:both
注意點
- 內(nèi)墻法能讓第二個盒子用margin-top屬性，也可以讓第一個盒子使用margin-bottom屬性
- 為那個新加的塊級元素設置高度也可以實現(xiàn)其對應的效果
內(nèi)外墻的區(qū)別
外墻法不能撐起第一個盒子的高度，而內(nèi)墻法則可以
注意一下
隔墻法在企開中不常用，因為你添加那一堆空白的塊級元素很沒意義，違背結構和樣式分離的原則
偽元素選擇器
它是給指定標簽內(nèi)容前面添加一個子元素，或者給標簽內(nèi)容后面添加一個子元素
格式
div::before {
content: "this is";
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
div::after {
/* 指定添加的子元素中的內(nèi)容 */
content: "world!";
/* 指定添加子元素的寬高 */
width: 50px;
height: 50px;
/* 指定添加子元素的背景顏色 */
background-color: pink;
/* 指定添加子元素的顯示模式 */
display: block;
/* 指定添加子元素的可見方式，hidden為隱藏 */
visibility: hidden;
}
清除浮動方式五
/* 設置添加的子元素的內(nèi)容為空 */
content: "";
/* 設置添加的子元素為塊級元素 */
display: block;
/* 設置添加的子元素的高度為0，讓其不占用空間 */
height: 0;
/* 設置添加的子元素為隱藏 */
visibility: hidden;
/* 重要！?。?！設置添加的子元素設置clear: both */
clear: both;
}
.box1 {
/* 兼容IE6的騷操作 */
*zoom: 1;
}
清除浮動方式六
overflow: hidden;
- 他可以將超出標簽范圍的內(nèi)容裁減掉
- 清除浮動
- 給外面的盒子設置overflow: hidden并讓里面的盒子設置margin-top之后，外面的盒子不被頂下來
注意
- IE6依舊不兼容，需要加上*zoom:1
