父元素如何圍住浮動子元素

轉載自：父元素如何圍住浮動子元素

 

當元素使用float屬性，將脫離文檔流，所以父元素便不會包圍它。

 1 <section>
 2       <div class="左欄">
 3         我是左欄
 4         我是左欄
 5         我是左欄
 6         我是左欄
 7       </div>
 8       <div class="右欄">
 9         我是右欄
10       </div>
11 </section>
12 <footer>我是頁腳</footer>

 

CSS樣式以下：

section{
  border: 1px solid #333333;
  margin:0 0 10px 0;
}
.左欄{
  width: 100px;
  border: 1px solid #333333;
}
footer{
  border: 1px solid #333333;
}

 

此時瀏覽器中顯示:

圖1.這是常規文檔流，能夠看到塊級元素section包圍左欄和右欄元素，頁面自上而下堆疊在一塊兒

當對左欄加入css樣式：float:left；瀏覽器中顯示變爲

圖2.浮動左欄後，父元素section只能包住右欄，由於左欄已經脫離了文檔流,因而footer也被提了上來，緊挨着前一個塊級元素section

若是想父元素仍然要包圍浮動的子元素，有三種方法：

 

 

 

1. 爲父元素設置overflow：hidden

深刻理解：overflow:hidden——溢出,坍塌,清除浮動

 

將section設置爲：

 

1 section{
2       border: 1px solid #333333;
3       margin:0 0 100px 0;
4       overflow: hidden;
5 }

 

圖3.給父元素應用了overflow：hidden後，父元素又包圍了浮動的左欄

這是overflow除了常規應用的另外一個做用，它可靠的迫使父元素包含其浮動的子元素。

2. 同時浮動父元素

第二種促使父元素包圍子元素的方法是讓父元素也浮動起來。

1 section{
2       border: 1px solid #333333;
3       margin:0 0 10px 0;
4       float:left;
5       width: 100%;
6 }

 

浮動section後，無論子元素是否浮動，它都會牢牢包圍住本身的子元素。所以，須要用width：100%再讓section與瀏覽器同寬。
    此時因爲section也脫離了文檔流，footer會努力向上擠到它旁邊，所以給footer應用clear：left；這樣便可和第一種方法取到一樣的效果。

3. 添加非浮動的清除元素

    第三種方法是給父元素最後添加一個非浮動的子元素，而後清除該子元素。因爲父元素必定會包含非浮動的子元素，經過把這個子元素放在浮動元素的下方，就能夠保證父元素必定會包住這個元素，同時也會包住前面的浮動元素。

 1 <section>
 2       <div class="左欄">
 3         我是左欄
 4         我是左欄
 5         我是左欄
 6         我是左欄
 7       </div>
 8       <div class="右欄">
 9         我是右欄
10       </div>
11       <div class="clear_me">        
12       </div>
13 </section>
14 <footer>我是頁腳</footer>

 

給新添加的元素添加CSS樣式：

.clear_me{
  clear:left;
}

 

這樣，浮動的元素就被父元素包圍住了，如圖3所示。

若是不想添加這個純表現性的元素，還有一個用CSS來添加這個清除元素的方法。
首先，給section添加一個類

 1 <section class="clearfix">
 2       <div class="左欄">
 3         我是左欄
 4         我是左欄
 5         我是左欄
 6         我是左欄
 7       </div>
 8       <div class="右欄">
 9         我是右欄
10       </div>
11 </section>

 

接着給這個clearfix類使用這個規則：

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

 

這樣，浮動的元素又像圖1同樣被父元素包住了。這個clearfix規則最先是由程序員Tony Aslett發明的，它只添加了一個內容爲句點的元素(句點是最小的內容)。

總結一下
強迫父元素包含其浮動子元素的方法有三種：

1. 爲父元素設置overflow：hidden；
2. 浮動父元素，而且設置寬度width：100%；其後的元素要設置clear：both；
3. 父元素內容末尾添加非浮動子元素，能夠直接加一個空元素，也可使用clearfix僞類添加。