解决边框塌陷的四种方法

最新推荐文章于 2024-05-08 22:33:14 发布

大雄先生

最新推荐文章于 2024-05-08 22:33:14 发布

阅读量1.5k

点赞数 2

文章标签： css3 css 前端 html 经验分享

本文链接：https://blog.csdn.net/x1785551/article/details/121852955

版权

当父级里面的子元素全部使用浮动后，所有子元素脱离了标准文档流，使得父级内部没有其内容，会造成边框塌陷现象。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="img/photo-1.jpg" alt="日用品"/></div>
<div class="layer02"><img src="img/photo-2.jpg" alt="图书"/></div>
<div class="layer03"><img src="img/photo-3.jpg" alt="鞋子"/></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
</div>
</div>
</body>
</html>

使用外部样式表：

div {
   margin:10px;
   padding:5px;
}
#father {
   border:1px #000 solid;
}

/* 让父级里面的子元素全部浮动*/
.layer01,.layer02,.layer03,.layer04{
   float: left;
}
.layer01 {
   border:1px #F00 dashed;
}
.layer02 {
   border:1px #00F dashed;
}
.layer03 {
   border:1px #060 dashed;
}
.layer04 {
   border:1px #666 dashed;
   font-size:12px;
   line-height:23px;
}

浮动之后父级边框塌陷了，解决的四种方法

对父级元素#father{overflow: hidden;}

       #father:after{
           display: block;
           content: ""; /*假设父级里面有内容，然后用clear清除，跟第一种方法类似*/
           clear: both;

       }

结果：

浮动消除问题解决！！！

大雄先生

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
解决边框塌陷的四种方法

当父级里面的子元素全部使用浮动后，所有子元素脱离了标准文档流，使得父级内部没有其内容，会造成边框塌陷现象。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <link href="css/float.css" rel="stylesheet" type="text/css"/><...
复制链接

扫一扫