点击刷新
BFC解决的问题
- 两列浮动布局
- 父元素高度塌陷
- margin重叠
display:block和display:table在处理BFC时的区别
//在父元素和子元素之间没有内容的情况下，当父元素、子元素都设置margin-top，子元素margin-top将不再起作用
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: aquamarine;
}
.wrap-item {
width: 100px;
height: 20px;
margin-top: 20px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap-item"></div>
</div>
</body>
解决方案：设置BFC或者父元素设置:before{display:table}注意这里设置display:block不会起作用
如何创建BFC
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
© 著作权归作者所有
举报
发表评论
0/200
