前端筆記—從入門到墳墓[CSS][CSS浮動][8]

浮動特性

1，浮動脫離文檔流，浮動的盒子會影響下面盒子的布局。

脫離文檔流特點：自己位置不予保留，後面元素會頂上來；父級元素檢查不到脫流元素，是以父級無法被其内容“撐開”。

第一個盒子浮動，會對第二個盒子影響。

第二個盒子會到第一個盒子下面去。

2，浮動盒子如果用于布局，且對下面盒子不影響，可以嵌套一個父級盒子（不過父級元素需要清除浮動）。

為什麼清除浮動，如何清除？

有的時候為了讓子元素（設定浮動的元素）自動調整大小。父元素沒有設定高度或寬度，這時父級元素會因為子元素脫離文檔流，沒有被撐開（無法擴充容器層），會導緻外層大小無法根據内容自動調整。是以我們需要清除浮動，使父級元素可以被撐開。

至于如何清除，下面我在做詳細介紹。

.div{
	width: 100px;
	height: 100px;
	background-color: #ccc;
}
.div1{
	float: left;
	background-color: #f00;
}
.div2{
    width: 200px;
}
           

<div style="overflow: hidden"><!--為父級元素清除浮動-->
    <div class="div1 div"></div>
</div>
<div class="div2 div"></div>
           

執行結果：

3，浮動屬性，會把元素預設轉化成行内塊（inline-block）。

行内塊元素浮動時不會疊加。

.div3-1{
	width: 100px;
	height: 100px;
	background-color: #ccc;
	float: left;
}
.div3-2{
	width: 100px;
	height: 100px;
	background-color: #f00;
	display: inline-block;
}
           

<div class="div3-1"></div>
<div class="div3-2"></div>
           

執行結果：

清除浮動

1，在最後一個浮動div後加上：

clear 清除該元素兄弟元素的浮動。如：clear: both使之兩側均不出現浮動。

.div4-1,.div4-2{
	width: 100px;
	height: 100px;
	background-color: #f00;
	float: left;
}
.div5{
	width: 100px;
	height: 100px;
	background-color: #ccc;
}
           

<div class="div4">
    <div class="div4-1">浮動</div>
    <div class="div4-2">浮動</div>
    <div style="clear: both"></div>
</div>
<div class="div5"></div>
           

執行結果：

2，給父級元素添加overflow:hidden屬性

.div4{
    overflow: hidden;
}
           

<div class="div4">
    <div class="div4-1">浮動</div>
    <div class="div4-2">浮動</div>
</div>
           

注：

overflow

屬性規定當内容溢出元素框時發生的事情。

屬性：

visible

預設值。内容不會被修剪，會呈現在元素框之外。

hidden

内容會被修剪，并且其餘内容是不可見的。

scroll

内容會被修剪，但是浏覽器會顯示滾動條以便檢視其餘的内容。

auto

如果内容被修剪，則浏覽器會顯示滾動條以便檢視其餘的内容。

inherit

規定應該從父元素繼承屬性的值。

3，僞元素法，為父級元素添加.clearfix類

第一個實作方案：

.clearfix:after{
    /*清除浮動*/
    content:"";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom:1;/*IE6清除浮動方式*/
}
           

第二個實作方案：

.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
	content: "";
    clear:both;
}
.clearfix{
    *zoom:1;
}