前端清除浮动
清除浮动
有了浮动可以让我们更加方便的布局.
但是浮动也可以带来一些负作用
为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.
清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的.
正所谓万变不离其宗
解决方法第一种
<<<html代码如下
<div class="header">
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="content"></div>
<<<js代码如下
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.nav li {
width: 45px;
height: 50px;
float: left;
border: 1px solid red;
}
.content {
width: 200px;
height: 200px;
background: blue;
}
给浮动元素的父辈容器添加高度
代码不过多展示 直击重点
只需要给ul父辈加高度完美解决
ul {
height: 55px;
}
给ul添加高度之后, div也有了高度, 然后后面的那个div就上不去了.相当于清除了浮动带来的影响
缺点: 需要手动添加高度, 如果后面li的高度发生变化之后,还行再次修改ul的高度, 给后期的维护带来麻烦.
优点: 简单粗暴直接有效
这种方式, 尽量少用, 高度最好依赖子元素来撑开, 避免手动添加.
解决方法第二种
clear属性是css专门提供用来清除浮动的.
这个属性主要有三个值:
left 清除前面的左浮动元素带给我的影响。
right清除前面的右浮动元素带给我的影响。
both 同时清除前面的左右浮动元素带给我的影响. 一般情况下选择这个值比较方便.就这个完美解决。
clear是避免前面的浮动元素对自己的影响. 所以, 谁不想让别人影响自己, 就添加到谁身上.
clear本质是, 浏览器在清理元素(使用clear属性的元素)的顶部添加了足够多的外边距, 使清理元素的顶部边缘垂直下降到浮动元素的下面.
.content {
width: 200px;
clear: both;
height: 200px;
background: blue;
}
不足1: 浮动元素的父辈仍然没有高度因为clear对那些浮动的元素没有做任何的操作, 所以浮动元素的父辈仍然没有高度(如果你没有手动添加的话)
不足2: 此时清除元素的margin-top失效前面说过clear的本质是在清理元素顶部添加足够多的外边距所以这个时候我们再手动添加margin-top就失效了.当然, 其他三个方向的margin还是有效的.
解决方法第三种：
基于上面clear方法
俗称外墙隔离无非就是多加一个div
<div class="header">
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="nn" style='clear:both'></div>
<div class="content"></div>
方法2清除浮动的最大问题是div.content不能设置margin-top无效.
缺点: 虽然此方法用起来爽, 也没啥后遗症, 但是无端添加了一个本不该有的元素, y影响了我们的HTML结构.
解决方法第四种：
内隔离 既然在外面影响结构了 我们就放元素里
<div class="header">
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="nn" style='clear:both'></div>
</div>
<div class="content"></div>
在第一个div内部添加一个清除浮动clear元素之后, 神奇的事情发生了, div.header竟然有自动有了高度.原因就是高度为0的div元素被固定在浮动元素的下面, div.header想要包含住这个新的div则必须自己有高度才行, 然后他就自己有了高度。
上帝说需要呼吸, 然后就有了空气.
在相当长的一段时间内, 这里的内墙元素隔离法是各大公司使用的手段.
解决方法第五种：
内墙法, 用着很爽.
但是对有洁癖的前端工程师来说, 也不是那么的舒服: 要添加一个元素去专门的清除浮动, 不爽.CSS3的伪元素(:😃拯救了他们.你只需要知道, 给一个元素添加一个::after则相当于给这个元素添加了子元素, 而且这个子元素会是他的最后一个儿子.
<body>
<div class="header">
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="content"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.nav li {
width: 45px;
height: 50px;
float: left;
border: 1px solid red;
}
.content {
width: 200px;
height: 200px;
background: blue;
}
.nav::after {
display: block;
content: '';
clear: both;
}
</style>
一些浏览器不兼容伪元素(你知道我说的谁), 那你就把这个伪元素的两个冒号, 变成一个就行了,成为伪类,效果一样,兼容性还好.
解决方法第六种：
使用over-flow清除浮动
他的作用是处理当子元素溢出的时候的情况的.
ul{
overflow: hidden;
}
神奇的事情发生了, ul竟然有了高度, 那么自然就清除了浮动对其他元素的影响.
why? 为什么会这么神奇? 我只能说这是浏览器的渲染机制引起, 是overflow的副作用.
使用这个属性要小心, 在内容多的情况下有可能引起内容的截断. 注意下就好.
总结:
清除浮动的核心理念就是想办法让浮动元素的父元素有高度, 事情就解决了.
