你真的懂float吗? 前言相信很多人都用过float属性,也知道float是干嘛的,但是在实际项目中有时候用起来往往不是想象中的结果,或者对为什么出现这样的结果不理解。 现在我也来浅谈一下float相关的事情, 请大家不要吐槽,积极给予我掌声,我会表面拒绝的,然后内心欣然接受你们的掌声。 属性列表float有四个属性,具体属性的意思我就不说了,不懂的通过传送门去查看:传送门 .xxx {
float: left | right | inherit | none
}
浮动元素显示规则1、对于它的父元素来说,浮动元素是不存在的一个元素如果仅仅有一个浮动元素为子元素的话,父元素的宽高会收起来(浮动元素不会撑起父元素的宽高): 例子1-1: .parent {
position: relative;
padding: 10px;
}
.child {
float: left
}
2、一个浮动元素的位置会尽可能的靠近他父元素的左上角或者右上角float: left的元素会尽量靠近父元素的左上角 float: right的元素会尽量靠近父元素的右上角 例子2-1: 3、 浮动元素前面定义的元素会把浮动元素挤到下面尽管浮动元素会尽可能的靠近父元素的左上角或者右上角(规则2),但是如果浮动元素前面有相邻元素的话,不管是inline(宽度大于父元素的时候)的或者block的,都会把浮动元素挤到下面。 例子3-1:浮动元素前面无元素的情况: 例子3-2:浮动元素前面有元素的情况: 4、先声明的浮动元素有优先靠近父元素左上角或者右上角(规则2)位置的权利如果一个父元素有多个浮动子元素,前面声明的浮动元素会更靠近父元素的左上角或者右上角 例子4-1:有三个浮动子元素的情况 <div class="container">
<div class="right">1</div>
<div class="right">2</div>
<div class="right">3</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
5、规则2的拓展如果有多个相同方向的浮动元素,浮动元素也会尽可能的靠近左上角或者右上角,直到父元素宽度没法放下这个元素的时候,这个元素才会被挤下去。 例子5-1: 6、inline元素添加浮动属性会拥有block特性可以添加宽高等。 7、浮动元素不会跑出父元素的边界这里是相对来说的,float:left元素不会跑出到父元素左边界的外面,不像position: absolute元素可以跑到父元素的外面。 例子7-1: 8、clear(清除浮动)扩展阅读clear属性的详解:传送门
来源:http://div.io/topic/1278 |