核心提示:例:!DOCTYPE htmlhtml lang=zh-CNheadmeta charset=utf-8/stylebody{margin:0;padding:0;}.p0{width:400px;b...
例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<style>
body{margin:0;padding:0;}
.p0{width:400px;background-color:skyblue;}
.p2,.p3{width:100px;height:100px;background-color:red;float:left;}
</style>
</head>
<body>
<p class="p0">
<p class="p2"></p>
<p class="p3"></p>
</p>
</body>
</html>
此时父元素p0无法包含子元素,解决办法:
1.给父元素设置overflow
.p0{overflow: hidden;}
2.增加一个子元素,设置clear: both;
<p></p>
3.给父元素设置float
.p0{float:left;}
缺陷:需要给父元素设置宽度。
4.移动端经常使用的方法
给父元素添加类class="clearfix"
.clearfix::after,.clearfix::before{
content: "";
height:0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}


