清除浮動

本文轉載自查看原文 2019-06-11 22:40 545 前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /*.left{*/
    /*width: 20%;*/
    /*height:1000px;*/
    /*background-color: red;*/
    /*float: left;*/
    /*}*/
        /*.right{*/
    /*width: 80%;*/
    /*height:1000px;*/
    /*background-color: green;*/
    /*float: right;*/
    /*}*/
    .c1{
        border:1px solid black;

    }

    .c2{
        height:100px;
        width:200px;
        background-color: red;

        border:1px solid black;

}
    .c3{
            height:100px;

            background-color: deeppink;


    }
        .left{
            float:left;
        }
        .right{
            float:right;

        }
        .cc{
            clear:both;

        }

    </style>

</head>
<body>
<!--<div class="left"></div>-->
<!--<div class="right"></div>-->
<div class="c1">
    <div class="c2 left"></div>
    <div class="c2 right"></div>
    <div class="cc"></div>
</div>
<div class="c3"></div>


<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

清除浮動示例clear:both

浮動元素會生成一個塊級框，而不論它本身是何種元素。

　　　　關於浮動的兩個特點：

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

　　三種取值

　　　　left：向左浮動

　　　　right：向右浮動

　　　　none：默認值，不浮動

參考示例

　　clear

　　　　clear屬性規定元素的哪一側不允許其他浮動元素。

值	描述
left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	默認值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

　　　　注意：clear屬性只會對自身起作用，而不會影響其他元素。按照我們上面那個例子的意思就是說，我們可以給粉色的那個c3屬性的div標簽設置一個clear：both，意思是說，這個標簽的左右都不能有浮動的標簽，那么它只能跑到兩個浮動的c2div標簽的下面，但是一般我們都會再c2和c3的中間加一個別的標簽，給這個標簽設置一個clear屬性，並且高度設置為0，或者不給高度，因為浮動的標簽是你自己c1里面的，所以你要自己解決，才能撐起你自己的高度，並且再用其他的標簽的時候，我們就不需要再考慮浮動的問題了，直接寫自己的樣式就可以了，不然你每次加其他的標簽都要去看看上面的標簽有沒有浮動的啊，對不對。

　　　　接着看上面這個示例，如果我們這樣設置：

　　　　這樣粉色的這個標簽就上不去了

　　清除浮動

　　　　浮動的副作用（父標簽塌陷問題），所以要清除浮動

　　　　主要有三種方式：

固定高度就是我們剛才的示例，在父標簽里面加一個其他的標簽
偽元素清除法 css來解決
overflow:hidden

　偽元素清除法（使用較多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

　　我們通過微元素清除法來清除一下浮動：

　　　　效果是一樣的：

　　　　一般業內約定成俗，都把這個清除浮動的class屬性命名為clearfix，而不是cc，如果你在別的網頁看到了這個clearfix，這個一定是用來清除浮動的。

　　　　總結一下：為什么要有浮動啊，是想做頁面布局，但是浮動有副作用，父級標簽塌陷，所以要想辦法去掉這個副作用，使用了clear來清除浮動帶來的副作用，我們當然也可以通過設置標簽為inline-block來實現這種布局效果，但是把一個塊級標簽變成一個類似內斂標簽的感覺，不好操控，容易混亂，所以一般都用浮動來進行布局。

　　　　來吧，大家試試把，然后我們再繼續學習~~

　　overflow溢出屬性（先看下面的例子）

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。