<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 500px;
/* height: 50px; */
background-color: pink;
/* overflow: hidden; */
/* float: left; */
display: inline-block;
}
.div1 {
width: 200px;
height: 200px;
background-color: red;
float: right;
}
.div3 {
height: 500px;
background-color: blue;
}
.wrap>div:last-child {
clear: both;
}
/* 同时解决外边距重叠和高度塌陷问题 */
.clearfix::after,
.clearfix::before {
content: "";
display: table;
clear: right;
clear: both;
}
/* .clearfix::before {
content: "";
display: table;
} */
.div4 {
width: 100px;
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<!-- red
浮动会导致父元素高度塌陷:
原因:
1.子元素浮动,脱离标准文档流;
2.父元素没有高度,默认有子元素给它撑开;
解决方法:
1.父元素设置固定的高度(不推荐使用);
2.BFC:块级格式化上下文
父元素开启BFC方法:
a.设置overflow非默认值
b.父元素设置浮动(float):会影响父元素的兄弟元素布局,不推荐使用
c.设置父元素为行内块元素
d.设置绝对定位
3.通过html在父元素中添加一个在标准文档流中的块元素,设置清除浮动
-->
<div class="wrap clearfix">
<div class="div1"></div>
<!-- <div></div> -->
</div>
<div class="div3"></div>
</body>
</html>
4660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
