浮動元素高度問題
- 在標準流中內(nèi)容的高度可以撐起父元素的高度
- 在浮動流中浮動的元素是不可以撐起父元素的高度的
清除浮動方式一
- 第一種方式
給前面一個父元素設(shè)置高度
注意點：
在企業(yè)開發(fā)中，我們能不設(shè)高度就不設(shè)高度胁住，所以這種方式用的很少
.box1{
height: 20px;
background-color: red;
}
.box2{
background-color: green;
}
清除浮動方式二
- 清除浮動的第二種方式
給后面的盒子添加 clear 屬性
clear 屬性取值：
none : 默認取值
按照浮動元素的排序規(guī)則來排序（左浮動找左浮動拂盯，右浮動找右浮動）
left:不要找前面的左浮動元素
right:不要找前面的右浮動元素
both:不要找前面的左浮動元素和右浮動元素
注意點：
當我們給某個元素添加 clear 屬性之后挥下，那么這個屬性的 margin 屬性就會失效
.box2{
background-color: green;
clear: both;
margin-top: 28px;
}
清除浮動方式三
- 隔墻法
- 外墻法 在兩個盒子中間添加一個額外的塊級元素
- 給這個額外添加的塊級元素設(shè)置 clear:both;屬性
.wall{
clear: both;
}
注意點
外墻法它可以讓第二個盒子使用 margin-top 屬性
外墻法不可以讓第一個盒子使用 margin-bottom 屬性
內(nèi)墻法
在第一個盒子中所有子元素的最后添加一個額外的塊級元素
給這個額外添加的塊級元素設(shè)置 clear:both; 屬性
注意點
內(nèi)墻法它可以讓第二個盒子使用 Margin-top 屬性外墻法和內(nèi)墻法的區(qū)別
外墻法不能撐起第一個盒子的高度
而內(nèi)墻法可以撐起第一個盒子高度在企業(yè)開發(fā)中不常用隔墻法來清除浮動
搜狐網(wǎng)頁有隔墻法使用
.wall{
clear: both;
}
/*塊級在第一個元素中*/
偽元素選擇器
- 什么是偽元素選擇器
偽元素其作用就是給指定標簽的內(nèi)容前面添加一個子元素或者給指定標簽的內(nèi)容后面添加一個子元素 - 格式：
標簽名稱::before{
屬性名稱:值;
}
給指定標簽的內(nèi)容前面添加一個子元素
標簽名稱::after{
屬性名稱:值;
}
給指定標簽的內(nèi)容后面添加一個子元素
div::before{
content: "愛你";
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
div::after{
content: "么么噠";
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
清除浮動方式四
- 清除浮動的第四種方式
利用偽元素選擇器清除浮動，本質(zhì)上就是內(nèi)墻法刊棕，只不過是直接通過 CSS 代碼添加了內(nèi)墻杀狡，其他特性和內(nèi)墻法都一樣
注意點
IE6 中不支持這種方式，為了兼容 IE6 必須給父元素添加 *zoom:1;屬性
.box1::after{
/*設(shè)置添加的子元素的內(nèi)容為空*/
content: "";
/*設(shè)置添加的子元素為塊級元素*/
display: block;
/*設(shè)置添加的子元素的高度為0*/
height: 0;
/*設(shè)置添加的子元素看不見*/
visibility: hidden;
/*給添加的子元素設(shè)置clear: both;*/
clear: both;
}
.box1{
/*兼容IE6*/
*zoom:1;
}
清除浮動方式五
- overflow:hidden;
- 作用：可以將超出標簽范圍的內(nèi)容裁剪掉
- 清除浮動
- 可以通過 overflow:hidden; 讓里面的盒子設(shè)置 margin-top 之后胁附，外面的盒子不會被頂下來
