web前端css之“浮动”

一、css浮动是什么意思？

1.所谓css浮动就是浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止

二、浮动影响？

1.当给元素设置float之后,元素脱离文档流,父元素没有设置height,造成塌陷

<div class="super">

    <div class="sub"></div>

</div>

.super{

    border:1px solid red;

}

 

.sub{

  float: left;

  background: green;

  border: 1px solid yellow;

  width: 100px;

  height: 100px;

}

2.浮动之后，行内元素，可以设置宽高:

行内元素在设置display: inline成为行内元素后，是不能设置宽高的，浮动之后，却可以支持宽高

三、清除浮动的方法？

1.方法1-增加一个样式为clear:both的空标签

<p style="clear:both;"></p> 这句标签放到浮动元素的父元素的最后。

原理:clear会在元素的margin-top之上增加一个清除区域(clearance),这个区域会在元素的margin-top上增加额外间隔,并且不允许浮动元素进入这个区域。

优点:方便,兼容性强。

缺点:多出许多无意义的标签,增加维护成本,而且稍不注意中间多了个空格会产生一段空白高度。

2.方法2-父元素设置浮动

优点:简单,代码少,浏览器支持好。
缺点:父级使用浮动之后,浮动造成的影响仍旧存在,并且不可能父级往上一级级都使用浮动

3.使用overflow、zoom属性

.fix{

    overflow:hidden(auto、scroll); 

    zoom:1;

}

优点:代码简洁,兼容性好,不产生多余标签。

缺点:设置该fix类的标签的内容超出该标签的时候会被隐藏(或产生滚动条)。

4.父元素设置浮动

优点:简单,代码少,浏览器支持好。
缺点:父级使用浮动之后,浮动造成的影响仍旧存在,并且不可能父级往上一级级都使用浮动。

5.父元素设置position

原理:在position的值不为relative或static的情况下,会形成BFC。

这种方式在父元素原本就需要设置position为fixed或者absolute的时候可以优先采用。

优点:简单,代码少,浏览器支持好。
缺点:改变父元素布局,影响整体布局。

6.使用：after

.fix:after{

    display:block; 

    content:''; 

    clear:both; 

}

原理类似添加新的标签然后设置clear:both;,但使用伪类的方法没有多余标签。

优点:代码简洁,兼容性好,不产生多余标签。