清除浮动的几种方法
2,449 阅读
<style type="text/css" media="screen">
*{
margin: 0；
padding：0；
}
div{
background-color:skyblue;
}
/*清除浮动的方法*/
li{
float: left;
width: 120px;
height: 40px;
background-color: yellow;
text-align:center;/*文本居中*/
}
/*①给祖先盒子加高度*/
/*.box1{
height: 40px;
}*/
/*在网页中 高度height其实很少出现 因为能被内容撑高 所以方法①工作中使用的很少*/
/*② clear both*/
/*.box2{
clear:both;
} *//*clear 清除 both指左浮动和右浮动都清除 表示清除别的浮动的影响*/
/*这个方法有个问题 margin无效 */
/*③ clear both隔墙法*/
/*.c1{
clear: both;
height: 10px;
}*/ /*用盒子添加clear both把要分开的两个浮动隔开*/
/*④ 内墙法*/
/*浮动的元素是无法给祖先元素撑出高的*/
.c2{
clear: both;
}/*和隔墙法不同 内墙法可以将祖先元素撑出高度 此时即使祖先元素没有赋予高 依然会有高度*/
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
</ul>
<div class="c2"></div>
</div>
<div class="c1"></div>
<div class="box2">
<ul>
<li>书库</li>
<li>练习</li>
<li>测评</li>
</ul>
</div>
</body>
