清除浮动
1、给浮动元素的祖先添加高度来清除子元素浮动对布局的影响
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
<ul>
<li>html</li>
<div class="menu">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
<div class="menu1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
css样式:
* {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
.menu ul li {
float: left;
background-color: lightyellow;
margin-left: 5px;
font-size: 30px;
}
.menu1 ul li {
float: left;
margin-left: 5px;
font-size: 30px;
}
代码演示:
可以看到本该换行的div.menu1和menu显示在一行里,这时我们就可以通过给menu来添加高度实现清除浮动:
.menu{ height: 50px; }
代码演示:
2、通过给布局中受影响的盒子添加clear:both;clear就是清除,both指的是左右浮动都清除。
缺点:会让盒子的margin属性失效
<div class="menu">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
<div class="menu1 clear">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
css样式:CSS
* {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
.menu ul li {
float: left;
background-color: lightyellow;
margin-left: 5px;
}
.menu1 ul li {
float: left;
background-color: lavenderblush;
margin-left: 5px;
}
.clear {
clear: both;
}
代码演示:
3、(1)隔墙法:隔开两部分浮动
在两个大盒子之间建起一堵墙 清除别人对我的影响
<div class="menu">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
<div class="wmq"></div>
<div class="menu1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
css样式中添加:
.wmq{ clear: both; }
(2)内墙法:清除li元素内部浮动
<div class="menu">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
<div class="wmq"></div>
</div>
<div class="menu1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
css样式:
.wmq{ clear: both; }
4、给祖先元素添加overflow:hidden;溢出隐藏:把溢出边框的内容隐藏起来 (作用在影响别人的盒子身上)
<div class="menu ">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
<div class="menu1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>h5</li>
</ul>
</div>
css样式:
.menu{ overflow: hidden; }
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果