<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度塌陷的问题</title>
<style>
/*
一、高度塌陷问题:在文档流中，父元素的高度默认是被子元素撑开的。子元素多高父元素就多高。
但当子元素摄制浮动后，我们发现父元素在页面中的位置没变，但是父元素的高度却塌陷了（没有被子元素撑开）
父元素在文档流中一旦发生高度塌陷的问题，将影响整个页面的问题
因此，高度塌陷问题我们必须解决！
二、高度塌陷问题的解决方法：
1.可以根据子元素的高度设置父元素的高度，使页面看起来不塌陷
但是，我们有时无法确定父元素的具体高度。因此，不建议这种方式
例如：评论展示、新闻阅读等
2.BFC（Block Formatting Context）块级格式化上下文
在W3C标准中，页面元素都有一个影响的属性，简称BFC
开启BFC后，元素具有以下特点：
父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素覆盖
开启BFC的元素可以包含浮动元素
如何开启BFC：
1.设置元素浮动
2。设置元素绝对定位
3。设置元素为inline-block
上述三种方式能解决高度塌陷问题，但是宽度会丢失，因此不推荐使用
4.设置元素的overflow：hidden
3.clear 属性清除浮动，用于清除浮动对元素造成的影响
可选值：
none 不清除浮动（默认值）
left 清除左侧浮动
right 清除右侧浮动
both 清除两侧浮动
思路:
1.为需要解决高度塌陷问题的父元素再创建一个子元素，
因为仅解决高度塌陷问题，因此使用伪元素创建更恰当
2.该子元素需要清除第一个元素浮动带来的影响
.father::after{
content: "";
clear: both;
display: block;
}
*/
.father{
/*height: 200px;*/
border: 10px solid red;
/*float: left;*/
/*display: inline-block;*/
/*overflow: hidden;*/
}
.son{
width: 200px;
height: 200px;
background-color: #c7edcc;
float: left;
/*float: left;*/
}
/*演示clear清除浮动
.ourter1{
width: 200px;
height: 200px;
background-color: #fed6e0;
float: left;
}
.ourter2{
width: 300px;
height: 300px;
background-color: #dce2f1;
float: right;
}
/*p{
clear: both;
}*/
/*
.ourter3{
width: 100px;
height: 100px;
background-color: yellowgreen;
clear: left;
}*/
/*伪元素创建的元素为行内元素，因此需要将行内元素转换为块元素*/
/*该通用代码既可以解决高度塌陷问题，又可以解决垂直外边距合并*/
.clearfix::after,.clearfix::before{
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son"></div>
</div>
<!--<hr>
<div class="ourter1"></div>
<div class="ourter2"></div>
<div class="ourter3"></div>
-->
<!--<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, saepe aperiam voluptatum laudantium dolores distinctio consectetur ex ratione quia quisquam, perspiciatis similique porro eius labore ipsum nobis temporibus harum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, saepe aperiam voluptatum laudantium dolores distinctio consectetur ex ratione quia quisquam, perspiciatis similique porro eius labore ipsum nobis temporibus harum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, saepe aperiam voluptatum laudantium dolores distinctio consectetur ex ratione quia quisquam, perspiciatis similique porro eius labore ipsum nobis temporibus harum.</p>-->
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)