css清除浮动

文档流：文档流是文档中可显示对象在排列时所占用的位置。
浮动：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

浮动产生的影响

浮动与元素超出包含框的时候，包含框不会自动伸高来闭合浮动元素，叫做高度塌陷。
如下所示：.main 和 .side 不会撑高父元素 .wrap 的高度

//  css代码


//  html代码

    
浮动
    
.main{float:left;}
    
.side{float:right;}

.footer

如何清除浮动

• 使用clear : left|right|both|none;
• 闭合浮动元素，减少浮动带来的影响

使用clear属性:

1.在浮动元素的后面添加

    
clear清除浮动
    
.main{float:left;}
    
.side{float:right;}
    


.footer

2.在浮动元素的后面添加


将上一个例子中的

替换为


父元素设置dispaly:table

在父元素的css中加入display:table，

.wrap{
        border: 2px solid gray;
        width: 400px;
        height: 100px;
        display: table;
    }

父元素设置overflow: hidden;

在父元素的css中加入overflow: hidden

.wrap{
        border: 2px solid gray;
        width: 400px;
        height: 100px;
        overflow: hidden;
    }

上面的例子中 .main 和 .side 中的一部分内容溢出被隐藏，修改的办法就是将 height: 100px;去掉，让元素自己撑开父元素，或者是把height的值设大一点，让元素不溢出就好了。

 .wrap {
        border: 2px solid gray;
        width: 400px;
        overflow: hidden;
    }

还可以设置 overflow: auto;

添加:after伪元素

给父元素添加伪元素

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