CSS布局中浮动问题怎么解决-创新互联

    
    
        
        
        
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .clearfix{
                clear: both;
            }
        
    
    
        
            儿子

应用：网页中应用不多，只是为了引导下一个清除浮动的方式。

缺点：结构冗余

（3）伪元素清除法

内墙法是在浮动元素的后面加一个空的 块级元素 (通常是div),并且该元素设置clear:both； 属性。

那么正好在css3的属性用法中整好有个选择器也完全符合这个用法，伪元素选择器。它就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，允许为元素的 某些部分设置样式 。

表示在p标签元素的最后面添加样式，同时这也正好符合内墙法的用法。

代码如下：

    
    
        
        
        
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .cleafix:after{
                content:'.';
                display: block;
                clear: both;
                overflow: hidden;
                height: 0;
            }
        
    
    
        
            儿子
        
    
    

当以后需要清除浮动时只需要在标签中再添加一个 “clearfix” 类就行，十分的方便快捷 ！

编写的伪元素清除法内容解释：

.clearfix:after{
        content:'';    　　　表示给.clearfix元素内部最后添加一个内容，该内容为行内元素。
        display: block;   　　　　设置该元素为块级元素，符合内墙法的需求。（有的地方使用table，因为table也是一个块级元素）
        clear: both;  　　　 清除浮动的方法。必须要写
        overflow: hidden; 　　　　如果用display:none;,那么就不能满足该元素是块级元素了。overflow:hidden;表示隐藏元素，但是该元素占位置；而display:none;不占位置。
        height: 0;
    }

此处梳理一下：after（伪类）和：：after（伪元素）的区别

相同点

• 都可以用来表示伪类对象，用来设置对象前的内容

• :before和::before写法是等效的; :after和::after写法是等效的，版本不同而已

不同点

• :before/:after是Css2的写法，::before/::after是Css3的写法

• :before/:after 的兼容性要比::before/::after好 ，

• 不过在H5开发中建议使用::before/::after比较好

注意

• 这些伪元素 要配合content属性一起使用

• 这些伪元素 不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

• 这些伪元素 的特效通常要使用:hover伪类样式来激活

（4）overflow:hidden

CSS属性overflow定义一个元素的内容太大而无法适应盒子的时候该做什么。它是overflow-x和overflow-y的简写属性

overflow属性不仅仅能实现以上效果，那么当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域，我们叫做它为块级格式化上下文 。

BFC只是一个规则。它对浮动定位都很重要。浮动定位和清除浮动只会应用于同一个BFC的元素。

浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

总结：只要我们让父盒子形成BFC的区域，那么它就会自动清除区域中浮动元素带来的影响 。

哪些会形成BFC区域：

如果你能读到这里，小编希望你对“CSS布局中浮动问题怎么解决”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注创新互联行业资讯频道！