浮动的特点与作用
文档流:所有的内容都是占位的,正常情况下:
块元素:上下显示,独占一行
内联元素:水平排列,左右显示
浮动改变块元素的排列方式,让内容从上下排显示成水平显示。
同时了解float的属性值:
left 左浮动
right 右浮动
none 不浮动
注意:
浮动元素会脱离文档流,不占位,盒子重叠,内容不重叠;
如果想要内容都水平排列,需要所有的盒子都设置浮动
如果浮动的元素大于父元素的宽,显示不下就会另起一行,第二行显示
浮动不占位的副作用只会同级之间产生,浮动的副作用都是往下影响,不会影响上边的盒子
浮动的影响
元素类型受浮动的影响
(不占位,脱离文档流)
块元素:
元素不设置宽,宽度是父元素的宽,如果设置浮动,块元素的宽度由内容撑开
内联元素
可以设置宽高
margin和padding可以设置四个方向
空格的间隙也能取消
高度塌陷
首先要了解什么是高度塌陷,以及产生高度塌陷的原因:
如果父元素不设置高,或者设置最小高,高度由内容撑开,一旦内容浮动后哦不占位,就会出现高度塌陷,图下是由于没设置父元素的高度,高度由内容撑开,一旦发生浮动,就会产生塌陷现象:
解决高度塌陷的方法:
1.给父元素添加overflow:hidden(overflow可以触发BFC,关于BFC,可以理解为这是一个独立的渲染区域,在这个区域里面,浮动元素参与高度计算)
2.可以在浮动的下边设置一个空盒子,给空盒子清除浮动,把父元素撑开,需要注意的是,这个盒子必须是块元素,不是的话需要转换display:block;
3.万能清除法 .clearfix,这个用到了一种伪类,::after,该种方式的原理和方法二原理一样,但是不用向页面中添加对于的结构,在图框框里面设置的是为了防止在content里面添加内容,设置了默认高度为0,并将添加的内容隐藏起来,overflow:hidden与vsibility:hidden两者都是隐藏的作用,但两者不同的是一个不占位一个占位。
注意!
最后一个方法要考虑版本的兼容性,解决版本兼容性可以设置属性zoom:1;
(扩展:在IE6中没有BFC,但是有一个和BFC类似的hasLayout,在IE6中可以通过开启hasLayout来解决高度塌陷的问题,而开启这个haslayout的开启方式是设置zoom:1)