首页 > 作文

详解CSS布局中浮动问题的四种解决方案

更新时间:2023-04-03 19:45:50 阅读: 评论:0

一、起因:

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

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

二、解决方案:

父盒子设置固定高度——————给父元素添加固定的高度内墙法 —————————R时间的测量12;-在父元素的后面添加一个空的div添加样式为 clear:both伪元素清除法————————-给父元素类名添加一个类叫 clearfix (推荐)overflow:hidden———————给父元素样式添加 overflow:hidden

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

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

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

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

(2)内墙法

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

代码如下:

<!doctype html>    <html>    <head>        <meta chart="utf-8">        <title>浮动元素的破坏性</title>        <style type="text/css">            .father{                border: 1px solid red;            }            .child{                width: 200px;                height: 200px;                float: left;                background-color: green;            }            .clearfix{                clear: both;            }        </style>    </head>    <body>        <div class="father">            <div class="child">儿子</div>            <div class="clearfix"></div>        </div>    </body>    </html>

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

缺点:结构冗余

(3)伪元素清除法

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

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

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

代码如下:

<!doctype html>    <html>    <head>        <meta chart="utf-8">        <title>浮动元素的破坏性</title>        <style type="text/css">            .father{                border: 1px solid red;            }            .child{                width: 200px;                height: 200px;                float: left;                background-color: green;            }            .cleafix:after{                content:'.';                display: block;                clear: both;                overflow: h学习十八大报告体会idden;                height: 0;            }        </style>    </head>    <body>        <div class="father clearfix">            <div class="child">儿子</div>        </div>    </body>    </html&元旦贺词gt;

当以后需要清除浮动时只需要在标签中再添加一个 “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区域,我们叫S7全球总决赛冠军做它为 块级格式化上下文

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

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

优点:代码简洁

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

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

哪些会形成bfc区域:

到此这篇关于详解css布局中浮动问题的四种解决方案的文章就介绍到这了,更多相关css布局浮动内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-03 19:45:48,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/56d5ded43556ac0f534cd40c38819963.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:详解CSS布局中浮动问题的四种解决方案.doc

本文 PDF 下载地址:详解CSS布局中浮动问题的四种解决方案.pdf

标签:元素   盒子   属性   高度
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图