什么是浮动?为什么要闭合浮动?怎么清除浮动?
2016-09-21 11:54
645 查看
一、什么是浮动?为什么要闭合浮动?
浮动是脱离文档的普通流存在的(可以看作是漂浮在普通流上),它可以左右浮动,直到它的外边缘遇到包含框或者另一个浮动框为止(即浮动框不在文档普通流中,所以在布局的时候文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素)。
正式因为这种浮动的这种特性,所以本该属于普通流中的元素浮动之后,,包含框的高度就可能会发生变化(包含框内部由于不存在其他普通流元素了,表现出的高度就为0),在实际应用中,这会严重影响到我们布局,所以我们需要闭合浮动,使其包含框表现出正常的高度。
二、怎么清除浮动?
1、在浮动元素末尾添加一个空div,例如 <div style=”clear:both”></div>;
[html] view
plain copy
<div>
<div style="float:left"></div>
<div style="float:left"></div>
<div style="clear:both;"></div>
</div>
注:实际操作太麻烦,后期维护不方便,不推荐使用
2、父级div定义 overflow: hidden;
[html] view
plain copy
<div style="overflow:hidden;">
<div style="float:left"></div>
<div style="float:left"></div>
</div>
注:无法显示溢出部分,不推荐使用。
3、对父级元素设置合适的高度;
注:要求能够详细计算出实际高度,否则容易布局混乱,不推荐使用。
4、对父级元素设置浮动;
注:与父元素相邻的元素的布局会受到影响,如果全部浮动的话,太麻烦也不利于后期维护,不推荐使用。
5、对父级元素设置伪元素,即:after;
[css] view
plain copy
.fatherBox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
注: 1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;
4)通过 content:"."生成内容作为最后一个元素
浮动是脱离文档的普通流存在的(可以看作是漂浮在普通流上),它可以左右浮动,直到它的外边缘遇到包含框或者另一个浮动框为止(即浮动框不在文档普通流中,所以在布局的时候文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素)。
正式因为这种浮动的这种特性,所以本该属于普通流中的元素浮动之后,,包含框的高度就可能会发生变化(包含框内部由于不存在其他普通流元素了,表现出的高度就为0),在实际应用中,这会严重影响到我们布局,所以我们需要闭合浮动,使其包含框表现出正常的高度。
二、怎么清除浮动?
1、在浮动元素末尾添加一个空div,例如 <div style=”clear:both”></div>;
[html] view
plain copy
<div>
<div style="float:left"></div>
<div style="float:left"></div>
<div style="clear:both;"></div>
</div>
注:实际操作太麻烦,后期维护不方便,不推荐使用
2、父级div定义 overflow: hidden;
[html] view
plain copy
<div style="overflow:hidden;">
<div style="float:left"></div>
<div style="float:left"></div>
</div>
注:无法显示溢出部分,不推荐使用。
3、对父级元素设置合适的高度;
注:要求能够详细计算出实际高度,否则容易布局混乱,不推荐使用。
4、对父级元素设置浮动;
注:与父元素相邻的元素的布局会受到影响,如果全部浮动的话,太麻烦也不利于后期维护,不推荐使用。
5、对父级元素设置伪元素,即:after;
[css] view
plain copy
.fatherBox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
注: 1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;
4)通过 content:"."生成内容作为最后一个元素
相关文章推荐
- CSS中为什么overflow:hidden能清除浮动(float)的影响?原理是什么?
- 清除浮动还是闭合浮动?为什么要清除浮动或闭合浮动?怎样清除浮动或闭合浮动?
- 什么是浮动?为什么要闭合浮动?
- 什么是对象,为什么要面向对象,怎么才能面向对象?
- div+css中的为什么要设置浮动属性,浮动完了为什么又要清除浮动
- 什么是对象,为什么要面向对象,怎么才能面向对象?
- 什么是对象,为什么要面向对象,怎么才能面向对象?
- float闭合(清除浮动)和CSS HACK
- css为什么要清除浮动
- 浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
- 关于li:hover的怎么清除浮动问题实现代码
- 什么是对象,为什么要面向对象,怎么才能面向对象?
- 为什么?这到底是为什么?怎么会这样?天啊!因为什么啊?
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- 什么是对象,为什么要面向对象,怎么才能面向对象?
- Lucene/ElasticSearch 学习系列 (1) 为什么学,学什么,怎么学
- 目前用来清除“闭合(清除)浮动”的方法
- 怎么做,为什么,什么用
- CSS清除浮动 万能float闭合
- 什么是对象,为什么要面向对象,怎么才能面向对象?