还在为css浮动对页面布局带来的影响而烦恼吗？ 教你几招！

什么浮动？

选择器{float(浮动): 属性值 - left / right 、none 默认值}
元素的浮动是指设置了浮动属性的元素会脱离标准普通流 ，移动到其父元素的指定位置

为什么要清除浮动？

浮动的本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响

方法一：

    
"father">
        
"son1">
        
"son2">
        
"son3">

        
"clear: both;">
    
    
"box">

缺点：会多解析一个标签 对性能有影响

方法二：

    
"father">
        
"son1">
        
"son2">
        
"son3">
        
"clear: both;">
    
    
"box">

.son1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
            float: left;
            /*清除两边浮动*/
            clear: both;
        }

方法三：

    
"father">
        
"son1">
        
"son2">
        
"son3">
        
"clear: both;">
    
    
"box">

.father{
            width: 500px;
            /*height: 500px;*/
            background-color: #1d90ff;
            /*在父元素的样式里面加上
			overflow: hidden;
			溢出隐藏*/
            overflow: hidden;
            /**zoom: 1;*/
        }

方法三：

    
"father">
        
"son1">
        
"son2">
        
"son3">
        
"clear: both;">
    
    
"box">

缺点：溢出的部分会隐藏 ，不利于后期的维护

.father:after{
			/*给父元素加伪元素选择器*/
            /*必须配合 content 设置空值*/
            content: ".";
            display: block;
            height: 0px;
            clear: both;
            visibility: hidden;
        }
        .father{
            width: 500px;
            /*height: 500px;*/
            background-color: #1d90ff;
            overflow: hidden;
            /*注意*/
            *zoom: 1;
        }