14、浮动（Fload）

最新推荐文章于 2021-11-02 22:25:10 发布

原创最新推荐文章于 2021-11-02 22:25:10 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

Web前端专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨CSS中浮动的概念，包括浮动元素如何脱离标准流、在一行内显示及具有行内块元素特性。同时，详细讲解清除浮动的必要性及其四种实现方法，帮助读者掌握布局设计中的关键技巧。

浮动（Fload）

相关概念
浮动的特性和使用
清除浮动

一、相关概念

1.1、标准流（普通流/文档流）

标准流：即标签按照默认的排列方式排列。

块级元素：独占一行，从上往下排列。（div、hr、h1~h6、ul、ol、form、table等）
行内元素，从左往右排列，碰到父元素边缘自动换行。（span、a、i、em等）

1.2、浮动流

浮动流：顾名思义，将物体（元素）向某一个方向浮起来。如果说标准流中的元素是河底的石头，那么浮动流中的元素就是水面上的漂浮物。
河水总是有流向的，石头不会因为流向而搬家，但是漂浮物却会！就像波澜不惊的湖面上漂浮着一些树叶，一阵北风拂过，树叶就会北漂而直至边境，一阵南风拂过，这些树叶又会南漂直至边境。湖水就是fload属性，风向（流向）就是fload属性的值。

二、浮动的特性和使用

<body>
    <div class="div" id="div1">1</div>
    <div class="div" id="div2">2</div>
    <div class="div" id="div3">3</div>
</body>

2.1、浮动元素会脱离文档流

浮动元素会脱离文档流的控制，移动（浮）到指定位置。简称脱标。
浮动的盒子不再保留原先的位置。

#div1{
    width:150px;
    height: 80px;
    background-color: red;
    float: left;/*脱离文档流*/
}
#div2{
    width:200px;
    height:100px;
    background-color: green;
}

在这里插入图片描述

2.2、浮动的元素会在一行内显示，且顶部对齐

如果给多个盒子设置了浮动，他们会按照属性值在一行内显示，且顶端对齐。

.div{
    width:200px;
    height: 100px;
    float: left;
}
#div1{
    background-color: hotpink;
}
#div2{
    background-color: green;
}
#div3{
    background-color: yellow;
}

在这里插入图片描述

2.3、浮动的元素会具有行内块元素的特新

任何元素都可以加浮动。不管之前是什么模式的元素，加了浮动之后就具有行内块元素的特性了。

三、清除浮动

<body>
    <div id="outer1">
        <div class="div">1</div>
        <div class="div">2</div>
        <div class="div">3</div>
        <div class="clear"></div><!--空盒子，不显示-->
        outer1
    </div>
    <div id="outer2">outer2</div>
</body>

3.1、为什么要清除浮动？

由于父元素在很多情况下不方便给高度，但是其子元素由于浮动流的缘故不占用高度，就会导致父元素的高度为0，这样就会导致后面的标准流排列出错（就像下面的案例一样）。

.div{
    width:200px;
    height: 100px;
    float: left;
    background-color: hotpink;
}
#outer1{
    background-color: yellow;
}
#outer2{
    width: 100%;
    height: 200px;
    background-color: green;
}

在这里插入图片描述

3.2、清除浮动

清除浮动的本质，就是清除浮动元素造成的影响。
如果父元素有高度，则不需要清除浮动
清除浮动以后，父元素会根据其浮动子元素自动检测高度并调整。就不会影响后面的排版了。

语法：clear:值;
/*  1、left：清除左侧浮动的影响（不允许左侧有浮动元素）
	2、right：清除右侧浮动的影响（不允许右侧有浮动元素）
	3、both：同时清除左右两侧浮动的影响。
*/

3.3、清除浮动的四种方法

1）、隔墙法（额外标签）

.div{
    width:200px;
    height: 100px;
    float: left;
    background-color: hotpink;
}
#outer1{
    background-color: yellow;
}
#outer2{
    width: 100%;
    height: 200px;
    background-color: green;
}
.clear{
    clear:left;
}

在这里插入图片描述

空标签必须是块元素。推荐使用DIV

2）、给父元素添加overflow属性（可选值：hidden、auto、scroll）

.div{
    width:200px;
    height: 100px;
    float: left;
    background-color: hotpink;
}
#outer1{
    overflow:hidden;
    background-color: yellow;
}
#outer2{
    width: 100%;
    height: 200px;
    background-color: green;
}