分享人:徐海达
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
浮动是怎么诞生的?浮动最初设计的目的并没那么很复杂的目的,就只是用来实现文字环绕效果而已。
但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在, 在inline-block出来之前,浮动大行其道。直到inline-block出来后,浮动也有它自己独特的使用场景
浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。 浮动的属性值有三个:float:none;float:left;float:right; 浮动不是任意的,其还是在父元素的范围之中,不能脱离于父元素的内容区域。
在非IE浏览器(如Firefox、Chrome)下,当容器的高度为auto,且容器的内容中有浮动(float为 left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出 到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进 行的CSS处理,就叫CSS清除浮动。
浮动会导致父元素高度坍塌,因为浮动脱离文档流,浮动以后不占文档流的位置,撑开的父元素高度会坍塌。
父级div给出固定的高度。手动定义height,这样就解决了父级元素获取不到高度的问题。 优点:代码量少,简单容易掌握。 缺点:只适合高度固定的布局,如果高度和父级div不同会出现问题。
添加一个新的标签,如div,或者br,并且设置标签的属性clear:both;清除浮动,让父级能自动获得高度。 优点:代码少,浏览器支持,不会各种问题。 缺点:会有很多空的div或者br。
父级div跟着浮动,所有代码一起浮动就会形成一个整体, 缺点:会产生新的问题,不建议使用。
感谢大家观看
BY : 徐海达