CSS布局中浮动问题怎么解决

本文将为大家详细介绍“CSS布局中浮动问题怎么解决”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“CSS布局中浮动问题怎么解决”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。

成都创新互联公司专注于英山企业网站建设,响应式网站建设,商城网站建设。英山网站建设公司,为英山等地区提供建站服务。全流程定制网站建设,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

一、起因:

CSS布局中浮动问题怎么解决

子盒子设置浮动之后效果:

CSS布局中浮动问题怎么解决

由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子 高度塌陷。如果网页中出现了这种问题,会导致我们整个网页的布局紊乱

二、解决方案:

  • 父盒子设置固定高度------------------给父元素添加固定的高度

  • 内墙法 -------------------------------在父元素的后面添加一个空的div添加样式为  clear:both

  • 伪元素清除法-------------------------给父元素类名添加一个类叫   clearfix   (推荐)

  • overflow:hidden---------------------给父元素样式添加  overflow:hidden

(1)父盒子设置固定高度

CSS布局中浮动问题怎么解决

虽然,给父盒子设置了固定高度能暂时解决我们的问题,但是它的使用不灵活,如果未来子盒子的高度需求发生了改变(网页的多处地方),那么我们得手动需要更改父盒子的高度。后期不易维护。

应用:网页中盒子固定高度区域,比如固定的导航栏。

缺点:使用不灵活,后期不易维护

(2)内墙法

在浮动元素的后面加一个空的 块级元素 (通常是div),并且该元素设置 clear:both; 属性。clear属性,字面意思就是清除,那么both,就是清除浮动元素对我左右两边的影响。

代码如下:


    
    
        
        浮动元素的破坏性
        
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .clearfix{
                clear: both;
            }
        
    
    
        
            儿子
            
        
         

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

缺点:结构冗余

(3)伪元素清除法

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

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

CSS布局中浮动问题怎么解决 

表示在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(伪元素)的区别

相同点

不同点

注意

(4)overflow:hidden

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

CSS布局中浮动问题怎么解决

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

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

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

CSS布局中浮动问题怎么解决

优点:代码简洁

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

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

哪些会形成BFC区域:

CSS布局中浮动问题怎么解决

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


名称栏目:CSS布局中浮动问题怎么解决
浏览路径:http://myzitong.com/article/jspjpj.html

其他资讯