脱离文档流&margin-top重叠问题&清除浮动
程序员文章站
2022-04-25 16:45:40
...
1.脱离文档流
脱离文档流的有:
(1).浮动
(2).绝对定位
(3).固定定位
脱离文档流的特点:
1.行内元素都变成了块元素;
2.宽高都是由内容撑开
2.margin-top重叠问题
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
width: 200px;
height: 200px;
background-color: red;
}
.outer > .inner{
width: 100px;
height: 100px;
background-color: royalblue;
margin-top: 100px;
}
.clearfix::before{
content: '';
display: table;
}
</style>
</head>
<body>
<div class="outer clearfix">
<div class="inner"></div>
</div>
</body>
</html>
3.清除浮动
3.1 开启BFC清除浮动元素带来的影响
最常用的是
overflow: hidden
3.2 最终解决方案
开启haslayout解决ie6,7底下没有伪元素,没有BFC
*是css hack(ie6789底下用的)
.clearfix{
*zoom: 1;
}
.clearfix::after, .clearfix::before{
content: '';
display: table;
clear: both;
}