首页 > 网站 > WEB开发 > 正文

CSS——float详解

2024-04-27 15:10:17
字体:
来源:转载
供稿:网友

1. float特性

浮动会破坏父元素高度,导致父元素的高度塌陷。在使用中应当适度使用。

2. 解决方法

在使用了float属性的元素后增加空div,给空div clear:both的属性。防止后面的元素向上浮动。

<div style="height : 0px; clear : both "> </div>

利用CSS伪类,在其后追加clear:both的元素

.clearfix:after{ content:"."; overflow:hidden; display:block; height:0; clear:both;}

IE6/IE7:

.clearfix:after{ *zoom:1; }BFC/haslayout haslayout可能在IE6/IE7上呈现出混乱的布局。 通常声明: float:left/rightposition:absoluteoverflow:hidden/scroll(IE7+) 使用时会触发浏览器的滚动条display:inline-block/table-cell(IE8+) *zoom:1(IE6/IE7)

3. 自适应布局

单侧固定

width+float padding-left/margin-left

自适应尺寸

float display:table-cell(IE8+) display:inline-block(IE7)


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表