16
2020
12

为什么会出现浮动? 什么时候需要清除浮动?清除浮动有哪些方式?优缺点是什么?你认为最好的是哪一种?为什么?

出现浮动的原因:


浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中,浮动定位不属于正常的页面流,而是独立定位的,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。


关于css的定位机制:普通流,浮动,绝对定位(position:fixed是position:absolute的一个子类)。浮动的框可以左右移动,直到它的外边缘遇到包含框或者另一个浮动框的边缘,所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以,只含有浮动元素的父容器在显示时不需要考虑子元素的位置,就造成显示父容器像空容器一样。


浮动带来的问题:


父元素的高度无法被撑开,影响与父元素同级的元素

与浮动元素同级的非浮动元素(内联元素)会跟随其后

若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。

清除浮动的方式:


父级div定义height

最后一个浮动元素后加空 div 标签 并添加样式 clear:both。(理论上能清除任何标签,增加无意义的标签)

包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。

父级 div 定义 zoom(空标签元素清除浮动而不得不增加无意义代码的弊端,使用zoom:1用于兼容IE)

用after伪元素清除浮动(用于非IE浏览器)

1、父级div定义height


原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题


优点:简单,代码少,容易掌握


缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题


建议:不推荐使用,只建议高度固定的布局时使用


2、结尾处加空 div 标签 clear:both


原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度


优点:简单,代码少,浏览器支持好,不容易出现怪问题


缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽


建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法


3、父级 div 定义 overflow:hidden


原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度


优点:简单,代码少,浏览器支持好


缺点:不能和position配合使用,因为超出的尺寸的会被隐藏


建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用


4、父级div定义伪类 :after 和 zoom


原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题


优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)


缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持


建议:推荐使用,建议定义公共类,以减少CSS代码


(1) 在子元素后添加一个空div div{clear:both;}


(2) 在父元素中{overflow:hidden|auto;zoom:1}


(3) :after伪选择符,在父容器的尾部自动创建一个子元素


.clearfix:after {

    content: "\0020";display: block;height: 0;clear: both;

}

.clearfix {

    zoom: 1;

}复制代码

"clearfix"是父容器的class名称,"content:"020";"是在父容器的结尾处放一个空白符,


"height: 0;"是让这个这个空白字符不显示出来,"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。:after选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"就行了.

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。