为什么需要浮动
有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。
因为浮动可以改变元素标签默认的排列方式
浮动及其工作原理
浮动的元素可以向左或向右移动,直到它的外边 缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动 ,必须为元素设置一个宽度( width)。虽然浮动元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现得就像浮动元素不存在一样,下面的元素会填补原来的位置。有些元素会在浮动元素的下方,但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时,要考虑浮动元素的边界,围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素,而内联元素会关注的元素。
内联元素可以实现浮动吗?
在css中,任何元素都可以浮动。不论浮动元素本身是何种元素,都会生成一个块级框。因此,对于内联元素,如果设置为浮动,会产生和块级框相同的效果。
浮动元素引起的问题和解决方法
浮动引起的问题
(1 )父元素的高度无法被撑开,影响与父元素同级的元素
(2 )与元素同级的非浮动元素会紧随其后(类似遮盖现象)。
(3 )如果一个元素浮动,则该元素之前的元素也需要浮动;否则会影响页面显示
的结构(即通常所说的串行现象)
解决方法(清除浮动)
1. clear清除浮动(添加空div法) 在浮动元素下方添加空div,并给该元素写css样式
2.给浮动元素父级设置高度
父级同时浮动(需要给父级同级元素添加浮动)父级设置成inline-block,其margin: 0 auto居中方式失效
直接给父级添加overflow:hidden清除浮动方法
另外一种万能清除法 after伪类清浮动
.float_ div:after{ content."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .float_ div{ /* 兼容ie */ zoom:1 }
清除浮动的本质是清除浮动元素脱离标准流造成的影响