float再学习
你真的懂float吗?
1、前言
相信很多人都用过float属性,也知道float是干嘛的,但是在实际项目中有时候用起来往往不是想象中的结果,或者对为什么出现这样的结果不理解。
现在我也来浅谈一下float相关的事情,
请大家不要吐槽,积极给予我掌声,我会表面拒绝的,然后内心欣然接受你们的掌声。
2、属性列表
float有四个属性,具体属性的意思我就不说了
3、浮动元素显示规则
3.1、对于它的父元素来说,浮动元素是不存在的
一个元素如果仅仅有一个浮动元素为子元素的话,父元素的宽高会收起来(浮动元素不会撑起父元素的宽高):
例子1-1:
3.2、一个浮动元素的位置会尽可能的靠近他父元素的左上角或者右上角
float: left的元素会尽量靠近父元素的左上角
float: right的元素会尽量靠近父元素的右上角
例子2-1:
3.3、 浮动元素前面定义的元素会把浮动元素挤到下面
尽管浮动元素会尽可能的靠近父元素的左上角或者右上角(规则2),但是如果浮动元素前面有相邻元素的话,不管是inline的或者block的,都会把浮动元素挤到下面。
例子3-1:浮动元素前面无元素的情况:
例子3-2:浮动元素前面有元素的情况:
3.4、先声明的浮动元素有优先靠近父元素左上角或者右上角(规则2)位置的权利
如果一个父元素有多个浮动子元素,前面声明的浮动元素会更靠近父元素的左上角或者右上角
例子4-1:有三个浮动子元素的情况
3.5、规则2的拓展
如果有多个相同方向的浮动元素,浮动元素也会尽可能的靠近左上角或者右上角,直到父元素宽度没法放下这个元素的时候,这个元素才会被挤下去。
例子5-1:
3.6、inline元素添加浮动属性会拥有block特性
可以添加宽高等。
3.7、浮动元素不会跑出父元素的边界
这里是相对来说的,float:left元素不会跑出到父元素左边界的外面,不像position: absolute元素可以跑到父元素的外面。
例子7-1:
原文:http://div.io/topic/1278