你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
weifengsn

你真的懂float吗 12个回复 专栏 @ CSS

weifengsn 发布于 4 年前

你真的懂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属性的详解:传送门

  • mithenji

    对于 3.0.1 这种情况 应该怎么来避免呢

    #1
  • 小小小无路

    清除浮动。。。

    #2
  • 小小小无路

    楼主讲完了表现。。再讲讲规则、原因就完美了。。么么哒

    #3
  • weifengsn

    @mithenji 你可以阅读一下关于BFC的文章。

    #4
  • weifengsn

    @小小小无路 留点东西给大家自己去试试(其实是我懒)

    #5
  • Jaylee

    @mithenji 在父元素上触发BFC,可以使用overflow:hidden触发

    #6
  • XTU_xiaoxin

    但是如果浮动元素前面有相邻元素的话,不管是inline的或者block的,都会把浮动元素挤到下面

    博主测试过么? 我测试出现的结果不是这样的啊(IE7版本没错)
    浮动元素前面有相邻元素的话,block的话会把浮动元素挤到下面,而inline元素却不是这样的,它是紧跟着float元素后面的( IE9+ chrome)

    #7
  • fansekey

    不言而喻,CSS 里面美的部分和不美的部分都像万花丛一样,让人浮想翩翩。有一种美更叫 CSS。

    #8
  • weifengsn

    @XTUxiaoxin 赞啊,有一点忘记说了,当前面的元素宽度大于父元素的宽度时候就会挤到下面。 我更新一下

    #9
  • linxz

    如果浮动元素旁边一个元素的没有浮动的情况下,同时这个元素有边框,有背景,有文本内容,那么这个时候会是怎么样的,似乎没看到。

    依稀记得在一些老旧的浏览器中,解析使用了旧的float解析方式,而新的是不一样的,也就影响了背景和边框(如果没记错的话……

    #10
  • weifengsn

    @linxz 这个还是得自己试试,别人写的文章不一定是正确的(也包括我的,哈哈),关键得自己去研究。

    对于你这个情况我建议你可以试以下几个情况:
    1、浮动元素旁边的元素在左边(右边也试试)。
    2、浮动元素旁边的元素是内联元素(block元素、一些其他的特殊元素)。

    #11
  • linxz
    #12
登录后回复,如无账号,请使用邀请码注册