清除浮动与父类塌陷问题

最新推荐文章于 2024-10-31 14:03:24 发布

0x1024

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量303

点赞数 7

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_44720226/article/details/141034623

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 现象描述

<!DOCTYPE HTML>
<html lang="en-US">
 <head>
 <title></title>
 <meta charset="utf8">
 <style>
 .box{
 border: 1px solid red;
}
 .c1{
 width: 200px;
 height: 200px;
 background-color: #336699;
 float: left;
 clear: both;
 }
 .c2{
 width: 200px;
 height: 200px;
 background-color: orange;
 float: right;
 /* clear: both; */
 }
 .footer{
 width: 100%;
 height: 60px;
 background-color: yellowgreen;
 }
 </style>
 </head>
 <body>
 <div class="box">
 <div class="c1"></div>
 <div class="c2"></div>
 </div>
 <div class="footer"></div>
 </body>
</html>

发现box的高度为0，因为其内部的元素浮动，脱离了文档流，所以无法撑起父类div，且类为footer的div没有沿着C1、C2显示。

2. 清除浮动

为footer添加clear:both样式，清除两边浮动，效果如下

 .footer{
 width: 100%;
 height: 60px;
 background-color: yellowgreen;
 clear: both;
 }

3. 解决父类塌陷

两种方法解决：

1. 添加隐藏元素

.clearfix:after { /*在类名为“clearfix”的元素内最后⾯加⼊内容*/
 content: "."; /*内容为“.”就是⼀个英⽂的句号⽽已。也可以不 写。*/
 display: block; /*加⼊的这个元素转换为块级元素。*/
 clear: both; /*清除左右两边浮动。*/
 visibility: hidden; /*可⻅度设为隐藏。注意它和display:none;是有
区别的。*/
 /* visibility:hidden;仍然占据空间，只是看不到⽽已；*/
 line-height: 0; /*⾏⾼为0；*/
 height: 0; /*⾼度为0；*/
 font-size:0; /*字体⼤⼩为0；*/
}

整段代码就相当于在浮动元素后⾯跟了个宽⾼为0的空div，然后设定它clear:both来达到清除浮动的效果。之所以⽤它，是因为，你不必在html⽂件中写⼊⼤量⽆意义的空标签，⼜能清除浮动。

< div class = "head clearfix" > </ div >

2. 父类添加隐藏属性

 .box{
 border: 1px solid red;
 overflow: hidden;
 }

可以看到父类的红框被撑起来了

0x1024

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录