清除浮动

<!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 属性的值。