float元素的影响—深入

1.对父元素
脱离正常文档流,父元素感知不到浮动元素的存在,会造成高度塌陷。
2.对非浮动兄弟元素
2.1.对非浮动块级兄弟元素
2.1.1.浮动元素在非浮动块级元素前面
代码:

<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="fl node">
    <div class="fl-son"></div>
</div>
<div class="sibling1"></div>

兄弟元素占据浮动元素的位置,并被浮动元素覆盖,层级不能改变。
2.1.2.浮动元素在非浮动块级元素后面
另起一行,其他同上
2.2.对非浮动inline级兄弟元素
2.2.1.浮动元素在非浮动inline级兄弟元素前面

<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="container">
    <div class="fl node">
        <div class="fl-son"></div>
    </div>
    <span class=" sibling1">
        测试段落
    </span>
</div>
一行,文字环绕float元素.不被覆盖
2.2.2.浮动元素在非浮动inline级兄弟元素后面
1
<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="container">    
    <span class=" sibling1">
        测试段落
    </span>
    <div class="fl node">
        <div class="fl-son"></div>
    </div>
</div>

怪异:非浮动元素最后一行在浮动元素后面?????
3.对浮动兄弟元素
3.1.对浮动块级兄弟元素
3.1.1.浮动元素在浮动块级兄弟元素前面
代码:

<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="fl node">
    <div class="fl-son"></div>
</div>
<div class="fl sibling1"></div>

相邻排列,互不覆盖
3.1.2.浮动元素在浮动块级兄弟元素后面
相邻排列,互不覆盖
3.2.对非浮动inline级兄弟元素
3.2.1.浮动元素在浮动inline级兄弟元素前面

<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="container">
    <div class="fl node">
        <div class="fl-son"></div>
    </div>
    <span class="fl sibling1">
        测试段落
    </span>
</div>
相邻排列,互不覆盖
3.2.2.浮动元素在浮动inline级兄弟元素后面
1
<style>
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .node{
        border: 1px solid red;
    }
    .fl-son{
        width: 100px;
        height: 100px;
    }
    .sibling1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .sibling2{
        width: 200px;
        height: 200px;
        background: #eee;
    }
</style>
<div class="container">    
    <div class="fl node">
        <div class="fl-son"></div>
    </div>
    <span class="fl sibling1">
        测试段落
    </span>
</div>

相邻排列,互不覆盖
总结:
1.元素被视作块级元素,相当于display设置为“block”;
2.元素具备包裹性,会根据它所包含的元素实现宽度、高度自适应;
3.浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素;
4.浮动元素前后的行内元素环绕浮动元素排列;
5.浮动元素之前的元素如果也是浮动元素,且方向相同,它会紧跟在它们后面;父元素宽度不够,换行展示;
6.浮动元素之间的水平间距不会重叠;
7.当包含元素中只有浮动元素时,包含元素将会高度塌陷;
8.浮动元素的父元素的非浮动兄弟元素,忽视浮动元素存在,覆盖浮动元素;
9.浮动元素的父元素的浮动兄弟元素,会跟随浮动元素布局,仿佛处在同一父元素中。
参考文章:
回归CSS标准之Float

此条目发表在CSS分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注