浮動+清除浮動

界面佈局

1.企業開發中何時使用標準流何時使用浮動流？
垂直方向使用標準流，水平方向使用浮動流。
2.拿到一個很複雜的界面如何入手？
從上至下佈局、從外到內佈局、水平方向能夠先劃分爲一左一右再對左邊或者右邊進行進一步的佈局。
3.在標準流中內容的高度能夠撐起父元素的高度，可是在浮動流中浮動的元素是不能夠撐起父元素的高度的。

清除浮動的方式

1. 清除浮動方式一：給前面一個父元素設置高度。

1.1）注意點：在企業開發中，咱們能不寫高度就不寫高度，因此這種方式用得不多。

2. 清除浮動的第二種方式：給後面的盒子添加clear屬性。

2.1）clear屬性取值:
none: 默認取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
2.2）注意點:
當咱們給某個元素添加clear屬性以後, 那麼這個屬性的margin屬性就會失效。

3. 清除浮動的第三種方式：隔牆法

3.1）外牆法
3.1.1）在兩個盒子中間添加一個額外的塊級元素
3.1.2）給這個額外添加的塊級元素設置clear: both;屬性
3.1.3）注意點:
外牆法它能夠讓第二個盒子使用margin-top屬性，外牆法不能夠讓第一個盒子使用margin-bottom屬性。
3.1.4）經過給額外盒子設置height高度來實現margin的效果。


3.2）內牆法
3.2.1）在第一個盒子中全部子元素最後添加一個額外的塊級元素
3.2.2）給這個額外添加的塊級元素設置clear: both;屬性
3.2.3）注意點:
內牆法它能夠讓第二個盒子使用margin-top屬性
內牆法它能夠讓第一個盒子使用margin-bottom屬性。
3.3）外牆法和內牆法區別?
外牆法不能撐起第一個盒子的高度, 而內牆法能夠撐起第一個盒子的高度。
3.4）在企業開發中不經常使用隔牆法來清除浮動。

4.清除浮動的第四種方式

4.1）利用僞元素選擇器清除浮動。本質上就是內牆法, 只不過是直接經過CSS代碼添加了內牆, 其它特性和內牆法都同樣
4.2）注意點:
IE6中不支持這種方式, 爲了兼容IE6必須給前面的盒子添加*zoom:1;屬性

5.清除浮動的第五種方式

5.1）overflow: hidden;做用
5.1.1）能夠將超出標籤範圍的內容裁剪掉
5.1.2）清除浮動

5.1.3）能夠經過overflow: hidden;讓裏面的盒子設置margin-top以後, 外面的盒子不被頂下來

僞元素選擇器

1.什麼是僞元素選擇器?
僞元素選擇器做用就是給指定標籤的內容前面添加一個子元素或者給指定標籤的內容後面添加一個子元素
2.格式:
2.1）給指定標籤的內容前面添加一個子元素
標籤名稱::before{
屬性名稱:值;
}
2.2）給指定標籤的內容後面添加一個子元素
標籤名稱::after{
屬性名稱:值;
}

 

 

 

 

來自爲知筆記(Wiz)