WEB：float布局

阳春三月天

已于 2023-06-25 15:16:58 修改

阅读量886

点赞数 1

分类专栏： HTML&CSS&JS 文章标签： html5 css

于 2023-06-25 15:11:00 首次发布

本文链接：https://blog.csdn.net/weixin_50517811/article/details/131376059

版权

HTML&CSS&JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 浮动：

CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）—— MDN

2. 元素浮动的特点：

脱离文档流
1. 元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
  
  脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
浮动后的元素变为行内块
1. 默认宽和高都被内容撑开（尽可能小）
2. 不会有行内块空白问题
3. 可以设置宽、高、margin、padding
4. 不会独占一行
浮动后的元素会自动排成一行，位置不够时会到下一行（不进行元素压缩/拉伸）
元素浮动不会超出父元素的范围
如果父元素没有高度，会造成父元素高度塌陷
浮动属性是给需要浮动的元素进行添加

3. 浮动示例

1. 容器设置

子元素超出父元素部分显示是由于默认 overflow:visible，父元素并没有被撑大

2. 全部项目浮动

1. 全部项目左浮动

2. 全部项目右浮动

1先进行右浮动，占据了右上角的位置

3. 标准流盒子与浮动元素的位置关系

1. 1号项目左浮动、5号项目右浮动

1左浮动后，2盒子占据了1原来的位置，但是文本内容会围绕1
5右浮动没有到右上角的原因是前面的4是标准流盒子
标准流盒子可以占据浮动元素的位置
浮动元素不会逾矩标准流盒子的位置

2. 1右浮动

1右浮动后，2标准流盒子占据了1原来的位置

4. 容器没有高度时

容器没有设置高度时，可以看到容器的高度由子元素标准流盒子高度撑起

项目全部浮动

此时子元素都为浮动元素，不能撑起父元素的高度——父元素高度塌陷

4. 元素浮动带来的影响

对父元素：不能撑起父元素高度，导致父元素高度塌陷，但父元素的宽度仍束缚着浮动元素
对兄弟元素：
1. 都浮动：排成一行，位置不够，下一行
2. 非都浮动：
  1. 标准流盒子元素会占据浮动元素原来的位置
  2. 浮动元素不会占据前面的标准流盒子元素的位置（无影响）

5. 清除浮动元素带来的影响

给父元素设置高度（例如浮动示例中的非4的部分）
给父元素设置浮动（但是会带来其他影响）

给父元素设置浮动，父元素和子元素在同一层，故子元素的高度撑起了父元素的高度

给父元素添加 overflow:hidden

overflow:hidden超出部分隐藏会计算高度

在浮动元素的最后添加一个空div，加属性 clear

<div style="clear: both;"></div>

<div style="clear: left;"></div>

<div style="clear: right;"></div>

给父元素设置伪元素

  .container::after{
            content: '';
            display: block;
            clear: both;
        }

为了代码简洁通用，可以设置一个类clearfix，在需要清除浮动的类后面跟clearfix即可

.clearfix::before{
	display: block;
    clear: both;
    height: 0;
    content: ' ';
}

.clearfix::after{
	display: block;
    clear: both;
    height: 0;
    content: ' ';
}

在布局中，若兄弟元素要么都浮动要么都不浮动

6. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
        }
        .container{
            width: 800px;
            margin: 0 auto;
            background-color: #bfa;
            border: 1px solid black;
            /* float: left; */
            /* overflow: hidden; */
        }

        .container::after{
            content: '';
            display: block;
            clear: both;
        }

        .item{
            width: 200px;
            height: 120px;
            background-color: darkcyan;
            border: 1px solid red;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            line-height: 120px;
            float: left;
        }
        /* .one{
            float: right;
       } */
        /* .five{
            float: right;
        } */


    </style>
</head>
<body>
    <div class="container">
        <div class="item one">1</div>
        <div class="item two">2</div>
        <div class="item three">3</div>
        <div class="item four">4</div>
        <div class="item five">5</div>
        <!-- <div style="clear: both;"></div> -->
    </div>
</body>
</html>

共勉