一、浮點元素高度問題
1.在標準流中內容的高度可以撐起父元素的高度
2.在浮動流中浮動的元素是不可以撐起父元素的高度的
1.清除浮動的第一種方式
給前面乙個父元素設定高度
注意點:
在企業開發中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
1.清除浮動的第二種方式
給後面的盒子新增clear屬性
clear屬性取值:
none: 預設取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
注意點:
當我們給某個元素新增clear屬性之後, 那麼這個屬性的margin屬性就會失效
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
1.清除浮動的第三種方式
隔牆法2.外牆法
2.1在兩個盒子中間新增乙個額外的塊級元素
2.2給這個額外新增的塊級元素設定clear: both;屬性
注意點:
外牆法它可以讓第二個盒子使用margin-top屬性
外牆法不可以讓第乙個盒子使用margin-bottom屬性
3.內牆法
3.1在第乙個盒子中所有子元素最後新增乙個額外的塊級元素
3.2給這個額外新增的塊級元素設定clear: both;屬性
注意點:
內牆法它可以讓第二個盒子使用margin-top屬性
內牆法它可以讓第乙個盒子使用margin-bottom屬性
4.外牆法和內牆法區別?
外牆法不能撐起第乙個盒子的高度, 而內牆法可以撐起第乙個盒子的高度
5.在企業開發中不常用隔牆法來清除浮動，因為這會多新增乙個快級元素，開發中不希望html來修改樣式，修改樣式是css的任務
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
1.什麼是偽元素選擇器?
偽元素選擇器作用就是給指定標籤的內容前面新增乙個子元素或者給指定標籤的內容後面新增乙個子元素
2.格式:
標籤名稱::before
給指定標籤的內容前面新增乙個子元素
標籤名稱::after
給指定標籤的內容後面新增乙個子元素
我是文字
1.清除浮動的第四種方式
利用偽元素選擇器清除浮動
本質上就是內牆法, 只不過是直接通過css**新增了內牆, 其它特性和內牆法都一樣
注意點:
ie6中不支援這種方式, 為了相容ie6必須給前面的盒子新增*zoom:1;屬性
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
1.overflow: hidden;
作用1.1可以將超出標籤範圍的內容裁剪掉
1.2清除浮動
1.3可以通過overflow: hidden;讓裡面的盒子設定margin-top之後, 外面的盒子不被頂下來
清除浮動的方式
現在許多 都是採用浮動的方式來編寫網頁，所以清楚如何清除浮動就顯得尤為重要。下面介紹清除浮動的六種方法。給第乙個盒子設定高度 標準流的元素會撐起父元素的高度，但是浮動流的元素是不會撐起父元素的高度的。第乙個盒子的元素全部浮動，所以導致第乙個盒子高度為0，也就是說body中第乙個元素為空，這樣第二個盒...
清除浮動的方式
清除浮動的方式常用的有三種 clearfix，clear both，overflow hidden clearfix是萬金油版本 寫法一 clearfix after寫法二 clearfix before,clearfix after clearfix after clearfixclear bot...
清除浮動的方式
首先我們需要明確乙個定義，什麼是浮動？元素使用float屬性之後，會脫離文件流，父級元素因此失去支撐 若父級元素未設定高度 下面的元素會忽略父級元素布局,為了不影響頁面布局效果，我們需要清除浮動。清除浮動的常用方式有以下三種 1.浮動元素的父級元素 parent 2.浮動元素的父級元素後新增偽元素 ...