【前端-CSS】clearfix解决外边距重叠、高度塌陷问题

最新推荐文章于 2022-09-21 16:40:26 发布

CactusStory_

最新推荐文章于 2022-09-21 16:40:26 发布

阅读量535

点赞数 1

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/CactusStory_/article/details/104824900

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

外边距重叠

产生原因：

垂直方向
相邻外边距

两个条件缺一不可。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>clearfix</title>
     <style>
         .box1{
             width: 200px;
             height: 200px;
             background-color: rgb(75, 129, 209);
         }
         .inner{
             width: 100px;
             height: 100px;
             background-color: rgb(103, 165, 216);
             margin-top: 100px;
         }
     </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
</html>

此时，inner设置的margin-top导致两个盒子一起下移100px
该现象是由于垂直方向上，相邻外边距折叠引起的。
在这里插入图片描述

解决

方案一

.box1::before{
		content: '---';
}

采用伪类before将两者隔开,让两者不相邻，
此时，两者不再相邻，也就不会出现外边距折叠，
但这种方案并不完善，会多出来一定高度，破坏了布局。
在这里插入图片描述

方案二

box1::before{
	 content: '';
	 display: table;
}

效果
在这里插入图片描述

clearfix作用

     <style>
         .box1{
             width: 200px;
             height: 200px;
             background-color: rgb(75, 129, 209);
         }
         .inner{
             width: 100px;
             height: 100px;
             background-color: rgb(103, 165, 216);
             margin-top: 100px;
         }
         .clearfix::before,
         .clearfix::after{
             content: "";
             display: table;
             clear: both;
         }
     </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="inner"></div>
    </div>
</body>

在这里插入图片描述

高度塌陷

after伪类解决高度塌陷

代码示例

     <style>
         .clearfix::before,
         .clearfix::after{
             content: "";
             display: table;
             clear: both;
         }
		 .box2{
			 margin-top: 100px;
			 border: 5px inset #85a7b1;
		 }
		 .inn{
			 height: 200px;
			 width: 200px;
			 float: left;
			 background: #ADD8E6;
		 }
     </style>
</head>
<body>
	<div class="box2">
		<div class="inn">			
		</div>
	</div>

效果
在这里插入图片描述

clearfix解决

//父元素添加clearfix类
	<div class="box2 clearfix">
		<div class="inn">			
		</div>
	</div>

效果
在这里插入图片描述

CactusStory_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端-CSS】clearfix解决外边距重叠、高度塌陷问题

clearfix解决外边距重叠、高度塌陷
复制链接

扫一扫

专栏目录

【前端-CSS】clearfix解决外边距重叠、高度塌陷问题

外边距重叠

代码示例

解决

clearfix作用

高度塌陷

代码示例

clearfix解决

“相关推荐”对你有帮助么？