和我一起打开浮动的大门。

吹吹晚风
283 阅读5分钟

关于浮动

CSS浮动是一种布局方式，它可以让元素脱离文档流，向左或向右移动，直到碰到包含框或另一个浮动元素为止。浮动元素的周围的文本或其他元素会重新排列，围绕在浮动元素的旁边。浮动通常用于实现图文混排、水平菜单、多栏布局等效果。

浮动的特点有：

  • 文字环绕。浮动元素可以让文字沿着它的边缘流动，形成环绕效果。例如，可以让一张图片向左或向右浮动，然后让段落的文字在图片的旁边显示。
  • 块级元素同行显示。浮动元素会变成块级元素，但是它不占据文档流的空间，所以可以让多个块级元素在一行内排列。例如，可以让多张图片或多个盒子向左或向右浮动，形成水平排列的效果。
  • 元素脱离文档流。浮动元素不再受文档流的约束，它会影响它周围的元素的位置和大小。例如，如果一个元素向左浮动，那么它下面的元素会上移，填补它原来所占的空间；如果一个元素向右浮动，那么它左边的元素会右移，紧挨着它显示。
  • 父容器高度塌陷。如果一个父容器只包含浮动元素，那么它的高度会变为零，因为浮动元素不占据文档流的空间。这会导致父容器无法包裹住浮动元素，影响布局和样式。例如，如果一个父容器有背景色或边框，那么它会无法显示出来。
  • 行内元素可以设置宽高。浮动元素会变成块级元素，所以可以给它设置宽度和高度。这对于一些本身是行内元素的标签（如span、a、img等）很有用，因为它们默认不能设置宽高。
  • 浮动元素可以设置外边距，但是不能设置居中对齐。浮动元素可以通过margin属性来调整它与其他元素的距离，但是不能使用margin: 0 auto;来实现水平居中对齐，因为这个属性只对文档流中的块级元素有效。
我们首先介绍文字环绕效果。

正常情况下我们在一个div容器里面给上一张图片，另一个div容器里面加一段文字就会出现这种情况。

image.png 图片右边有着大片空白，如果我们需要把文字加在图片左边怎么办呢？那就可以用上浮动这个属性。 只需在图片的样式里面加一个浮动

img {
  float: left;
}

就可达到这个效果

image.png

这样就可以让图片向左浮动，并且让文字在图片的右边显示。这就是浮动的文字环绕特点。

下面我们介绍块级元素同行显示。

首先我们要了解 每个div属性都是默认的块级元素（如下图所示）。 image.png

而块级元素都是独占一行，不允许其他元素来放进来的。如下所示

<style>
    *{
        margin: 0;
        padding: 0;
    }

    div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        
    }
    .item1{
        background-color: lightblue;
    }
    .item2{
        background-color: lightgreen;
        
    }
    .item3{
        background-color: rgb(222, 222, 19);
    }
</style>
<body>
    <div class="item1">111</div>
    <div class="item2">222</div>
    <div class="item3">333</div>
</body>

image.png

如果我们需要达到下图这样的效果怎么使用浮动处理呢？

image.png

我们只需在div样式里面给他加一个左浮动就可以

div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        float：left；
    }

这就使块级元素在同行显示了。

元素脱离文档流和父容器高度塌陷是什么样子呢？

脱离文档流是一个怎么样的效果呢，让我们看看下面两张图的对比

image.png

image.png

我们给第2个div添加了向左浮动，然后第3个div就跑到了第2个盒子的位置。为什么会这样呢？因为浮动元素不再受文档流的约束，它会影响它周围的元素的位置和大小。一个元素向左浮动，那么它下面的元素会上移，填补它原来所占的空间。这就是脱离文档流。

父容器高度塌陷是什么呢？我们看一串代码

<style>
    *{
        margin: 0;
        padding: 0;
    }

    div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        float: left;
    }
    .item1{
       
        background-color: lightblue;
    }
    .item2{
        
        background-color: lightgreen;
        
    }
    .item3{
       
        background-color: rgb(222, 222, 19);
    }
</style>
<body>
    <div class="item1">111</div>
    <div class="item2">222</div>
    <div class="item3">333</div>
</body>

我们在div中加入了一个左浮动，然后3个div就都到一行了。再看父容器container的高度是0！

image.png

为什么呢？

答案是：一个父容器只包含浮动元素，那么它的高度会变为零，因为浮动元素不占据文档流的空间。这就是父容器高度塌陷。

行内元素可设置宽高

行内元素是设计不了宽高的，只有块级元素才能设置宽高。

<style>
 *{
     margin: 0;
     padding: 0;
 }
 .box{
     width: 100vw;
     height: 200px;
     background-color:orchid;
     
 }
 span{
     width: 100px;
     height: 100px;
     background: lemonchiffon;
     
     
 }
</style>
<body>
 <div class="box">
     <span>1</span>

 </div>
</body>

image.png

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100vw;
        height: 200px;
        background-color:orchid;
        
    }
    span{
        width: 100px;
        height: 100px;
        background: lemonchiffon;
        float: left;
        
    }
</style>
<body>
    <div class="box">
        <span>1</span>

    </div>
</body>

image.png

由上图片可看出，第一组代码中span设置了宽度和高度，但是到了页面中却没有显示。这是因为span标签是行内元素不能设置宽高。第二组代码中，给span加了一个float：left然后就有宽高了。这就说明，浮动可以让行内元素可以设置宽高。

浮动元素可以设置外边距，但是不能设置居中对齐！
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100vw;
        height: 200px;
        background-color:orchid;
        
    }
    span{
        width: 100px;
        height: 100px;
        background: lemonchiffon;
        float: left;
        margin-left: 500px;
    }
</style>
<body>
    <div class="box">
        <span>1</span>

    </div>
</body>

image.png 我给设置了浮动的span标签，设置了一个左外边距500px，如图。那是不是可以用margin：0 auto；使其居中对齐呢？我们来看看

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100vw;
        height: 200px;
        background-color:orchid;
        
    }
    span{
        width: 100px;
        height: 100px;
        background: lemonchiffon;
        float: left;
        margin: 0 auto;
    }
</style>
<body>
    <div class="box">
        <span>1</span>

    </div>
</body>

image.png 效果如上图所示，我们可得出居中对齐对于浮动来说没有用，所以不能设置居中对齐。为什么呢?

因为margin：0 auto；这个属性只对文档流中的块级元素有效，而浮动会让元素脱离文档流，所以这个水平居中对齐属性就对设置了浮动的元素无效了。

avatar
文章
阅读
粉丝