浮动的作用
1、是为了让元素并排
2、转换行级标签成块级标签,使其可以设置宽高
使用浮动带来的影响
脱离文档流,对其后面紧随的元素产生影响,进行覆盖,优先显示
清除浮动解决方案
(1)浮上去的元素,给它设置float:left;让它也浮动起来,但是它的结构便不是自然的结构了,不推荐
(2)在用完浮动的地方的后面建立一个空标签,给空标签设置一个属性,clear:both;弊端:会造成标签冗余,不推荐
(3)在父级盒子里设置超出隐藏,overflow:hidden;弊端:可能会对文档结构产生影响,如后期的特效,不推荐
1、是为了让元素并排
2、转换行级标签成块级标签,使其可以设置宽高
使用浮动带来的影响
脱离文档流,对其后面紧随的元素产生影响,进行覆盖,优先显示
清除浮动解决方案
(1)浮上去的元素,给它设置float:left;让它也浮动起来,但是它的结构便不是自然的结构了,不推荐
(2)在用完浮动的地方的后面建立一个空标签,给空标签设置一个属性,clear:both;弊端:会造成标签冗余,不推荐
(3)在父级盒子里设置超出隐藏,overflow:hidden;弊端:可能会对文档结构产生影响,如后期的特效,不推荐
(4)通过在用完浮动的盒子处建立伪类选择器清除浮动,格式.box:after{content:"";display:block;clear:both;}推荐使用
浮动可以使行级标签像块级标签一样使用,有宽高并且并排
浮动能少用就尽量少用,因为用了浮动的元素已经脱离了文档流,在html里面不再占有空间并且显示。会对后面紧跟着的元素再次影响覆盖它。
什么是文档流呢? 文档流就是元素在html里面占有实实在在的空间,对后面的元素不会产生影响