2015-10-16 |

你真的懂float吗

float再学习

你真的懂float吗?

1、前言

相信很多人都用过float属性,也知道float是干嘛的,但是在实际项目中有时候用起来往往不是想象中的结果,或者对为什么出现这样的结果不理解。

现在我也来浅谈一下float相关的事情,

请大家不要吐槽,积极给予我掌声,我会表面拒绝的,然后内心欣然接受你们的掌声。

2、属性列表

float有四个属性,具体属性的意思我就不说了

你真的懂float吗

3、浮动元素显示规则

3.1、对于它的父元素来说,浮动元素是不存在的

一个元素如果仅仅有一个浮动元素为子元素的话,父元素的宽高会收起来(浮动元素不会撑起父元素的宽高):

例子1-1:

你真的懂float吗

你真的懂float吗

3.2、一个浮动元素的位置会尽可能的靠近他父元素的左上角或者右上角

float: left的元素会尽量靠近父元素的左上角

float: right的元素会尽量靠近父元素的右上角

例子2-1:

你真的懂float吗

3.3、 浮动元素前面定义的元素会把浮动元素挤到下面

尽管浮动元素会尽可能的靠近父元素的左上角或者右上角(规则2),但是如果浮动元素前面有相邻元素的话,不管是inline的或者block的,都会把浮动元素挤到下面。

例子3-1:浮动元素前面无元素的情况:

你真的懂float吗

例子3-2:浮动元素前面有元素的情况:

你真的懂float吗

3.4、先声明的浮动元素有优先靠近父元素左上角或者右上角(规则2)位置的权利

如果一个父元素有多个浮动子元素,前面声明的浮动元素会更靠近父元素的左上角或者右上角

例子4-1:有三个浮动子元素的情况

你真的懂float吗

你真的懂float吗

3.5、规则2的拓展

如果有多个相同方向的浮动元素,浮动元素也会尽可能的靠近左上角或者右上角,直到父元素宽度没法放下这个元素的时候,这个元素才会被挤下去。

例子5-1:

你真的懂float吗

3.6、inline元素添加浮动属性会拥有block特性

可以添加宽高等。

3.7、浮动元素不会跑出父元素的边界

这里是相对来说的,float:left元素不会跑出到父元素左边界的外面,不像position: absolute元素可以跑到父元素的外面。

例子7-1:

你真的懂float吗

原文:http://div.io/topic/1278

 

发表评论

    评价:
    验证码: 点击我更换图片