[複習］清除浮動的幾種方法總結

爲什麼需要清除浮動

前面有一篇博客中有提到關於”浮動塌陷”的描述http://blog.csdn.net/github_38861674/article/details/77427309
由於包含元素裏面的元素都設置爲浮動，導致包含元素的高度塌陷爲0，如下圖所示：

這種塌陷進而會產生如下後果：

• 包含元素的背景和邊框不能生效

• margin 和padding值不能生效，特別是上下的margin和padding值
  
  
  
  

  如何清除浮動：

一、clear屬性：

clear屬性有五種可能的值：
right：不允許右邊出現浮動元素
left: 不允許左邊出現浮動元素
both：不允許兩邊出現浮動元素
none：默認值，允許兩邊出現浮動元素
inherit：繼承

 下面來看看代碼演示： 
    heml結構爲：
 <div class="container">
    <div class="float1">float-1</div>
    <div class="float2">float-2</div>
  </div>

1、不設置float時：父元素高度爲兩個子塊狀元素的高度和

.container{
            width: 200px;
            border: 2px solid #ddd;
        }
        .container .float1{
            width: 80px;
            height: 80px;
            background-color: yellow;
        }
        .container .float2{
            width: 80px;
            height: 80px;
            background-color: yellow;
        }

2、子元素都設置浮動時：父元素高度爲0，發生了”浮動塌陷”

        .container{
            width: 200px;
            border: 2px solid #ddd;
        }
        .container .float1{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }
        .container .float2{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }

3、當給float1元素清除有浮動時：顯示效果沒有差別

.container{
            width: 200px;
            border: 2px solid #ddd;
        }
        .container .float1{
            width: 80px;
            height: 80px;
            float: left;
            clear: right;
            background-color: yellow;
        }
        .container .float2{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }

4、當給子元素float2添加clear：left 時，float2元素下移，但是父元素仍然

5、在子元素後面添加一個空的div，然後這個div設置clear：both；或者clear：left；
html結構

 <div class="container">
    <div class="float1">float-1</div>
    <div class="float2">float-2</div>
    <div class="clear"></div>
  </div>

css樣式

    .container{
            width: 200px;
            border: 2px solid #ddd;
            clear: both;
        }
        .container .float1{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }
        .container .float2{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }
        .clear{
            clear: left;
        }

效果圖：

二、overflow屬性

只給父元素設置overflow：hidden；或者auto，就可以了；

    .container{
            width: 200px;
            border: 2px solid #ddd;
            overflow: hidden;
        }
        .container .float1{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }
        .container .float2{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }
        .clear{
            clear: left;
        }

after 選擇器

給父元素設置：
：after僞元素

.container{
            width: 200px;
            border: 2px solid #ddd;
        }
        .container:after{
            content: '';//給父元素的內容後添加空的字符串
            visibility: hidden;
            display: block;
            height: 0;//高度爲0，不會擠壓其他元素
            clear: both; //清除爲元素兩邊的浮動
        }
        .container .float1{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }
        .container .float2{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }