一、浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
二、浮动元素引起的问题:
(1)父元素的高度无法被撑开,影响与父元素同级的元素 (2)与浮动元素同级的非浮动元素会跟随其后 (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
解决方法: 使用
CSS
中的clear:both
;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加
clearfix
样式:.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */
三、清除浮动的技巧
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。额外标签法,<div style="clear:both;"></div>
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。设置`overflow`为`hidden`或者auto
3.使用after伪对象清除浮动。
#parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; }
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;
二、content属性是必须的,但其值可以为空,
蓝色理想讨论该方法的时候content属性的值设为”.”为空亦是可以的。
4 .浮动外部元素
浮动
最新推荐文章于 2024-08-03 18:21:02 发布