float属性

浮动的本质就是为了实现文字环绕效果。而这种文字环绕,主要指的就 是文字环绕图片显示的效果。

一、float 特性:
(1)包裹性;(2)块状化并格式化上下文;(3)破坏文档流;(4)没有任何margin合并

1、块状化:元素一旦float 的属性值不为none,则其display 计算值就是block 或者table。不要指望使用text-align 属性控制浮动元素的左右对齐,因为text-align 对块级 元素是无效的。

float 与display 转换关系表

 设定值计算值 
 inline block
 inline-block block
 inline-table table
 table-row block
 table-row-group block
 table-column block
 table-column-group block
 table-cell block
 table-caption block
 table-header-group block
 table-footer-group block

二、BFC

1、clear:both 的作用本质是让自己不和float 元素在一行显示,并不是真正意义上 的清除浮动。

2、BFC:如果一个元素具有BFC,内部子元素再怎么翻江倒海、翻 云覆雨,都不会影响外部的元素。其可以用来清除浮动的影响。

触发BFC 的常见的情况如下:

 <html>根元素;
 float 的值不为none;
 overflow 的值为auto、scroll 或hidden;
 display 的值为table-cell、table-caption 和inline-block 中的任何一个;
 position 的值不为relative 和static。

换言之,只要元素符合上面任意一个条件,就无须使用clear:both 属性去清除浮动的 影响了。

3、BFC与流体布局:

普通流体元素在设置了overflow:hidden 后,会自动填满容器中除了浮 动元素以外的剩余空间,形成自适应布局效果,而且这种自适应布局要比纯流体自适应 更加智能。

图片和文字如果想要 保持合适的间距,很简单,如果元素是左浮动,则浮动元素可 以设置margin-right 成透明border-right 或paddingright; 又或者右侧BFC 元素设置成透明border-left 或者 padding-left,但不包括margin-left,因为如果想要使用margin-left,则其值必须 是浮动元素的宽度加间隙的大小,就变成动态不可控的了,无法大规模复用。

假设我们希望间隙是10px,则下面这几种写法都是可以的: 

 img { margin-right: 10px; } 
 img { border-right: 10px solid transparent; } 
 img { padding-right: 10px; }
 .animal { border-left: 10px solid transparent; }
 .animal { padding-right: 10px; }


上一篇: CSS零碎知识点
下一篇: DOMContentLoaded与load的区别
作者邮箱: 203328517@qq.com