css中浮动需要注意的东西

来源:互联网 发布:网络维护维修预算 编辑:程序博客网 时间:2024/05/18 06:21

1.css中的浮动:

在css中为了让元素移动到父元素的左边或者右边,我们可以对元素设置浮动float.

2.float:left/right

浮动的选择有两种,一种是float:left左浮动。还有一种是float:right右浮动

3.如果对一个元素设置了浮动,那么这个元素就会脱离标准文档流,并且该元素后面的元素会占据该元素原本的位置,并且元素后面的内容会被挤出。

4.加了浮动的元素是没有宽和高的,并且该元素的父元素的高度也会显示即高度塌陷,加了浮动的元素的宽和高是根据元素内部的内容动态需变化的。要对其父元素重新设置高度。

5.如果对某些元素设置了左浮动,那么这些元素会在同一排显示,但是如果这些元素的宽度和大于父元素,超出的部分(包括该元素)就会在下一行显示。

6.浮动的应用:

在网页布局的时候,一般一个网页的主体会分为几列,这时候我们可以使用浮动来实现。

内容包裹图片显示的时候,我们对图片设置浮动就可以,剩下的元素会占据图片原本的位置,但是内部的文本内容会在四周显示,即文本内容会被挤出。

在设置网站的横向导航的时候,,可以对列表元素设置浮动。

7.在实际应用的时候,我们需要对某些受到浮动影响的元素设置清除浮动,即不需要占据浮动元素原本的位置,我们可以通过设置clear:both/left/right.

8.clear:both  清除所有的浮动影响,不管是左浮动还是右浮动

   clear:left    清除左浮动的影响

   clear:right  清除右浮动的影响





1 0