关于css的盒子的浮动属性和清除浮动属性（奉上代码）

一个好好的程序员

已于 2022-03-05 13:56:52 修改

阅读量1k

点赞数 1

文章标签： css css3 前端

于 2022-03-05 13:53:17 首次发布

本文链接：https://blog.csdn.net/m0_62823653/article/details/123293184

版权

属性值

1左浮动

float:left;

2右浮动

float:left

注意事项（浮动的特点）一浮全浮

1.浮动元素会脱标，在标准流中不占位置

2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

6.浮动时,当父亲装不下浮动的子元素,此时此子元素会换行显示

7.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

让黄色块级元素和蓝色块级元素同行显示，且没有缝隙，使用浮动做法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动</title>
  <style>
    /* 目标 */
    /* 让黄色块级元素和蓝色块级元素同行显示，且没有缝隙，使用浮动 */
    * {
      /* 清除盒子内外边距 */
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .banner {
      /* 首先设置一个大盒子里面装着类名为left和right两个盒子 */
      width: 1226px;
      height: 460px;
      background-color: red;
      margin: 0 auto;
    }

    .left {
      /* 给名叫left的盒子左浮动 */
      float: left;
      /* 给名叫left的盒子设置宽高 */
      width: 234px;
      height: 460px;
      background-color: #ffa500;
    }

    .right {
      /* 给名叫right右浮动 */
      float: right;
      /* 给名叫right的盒子设置宽高 */
      width: 992px;
      height: 460px;
      background-color: #87ceeb;
    }
  </style>
</head>

<body>
  <div class="banner">
    <!-- left盒子和right盒子相加的宽高不能大于banner那个大盒子 -->
    <div class="left"></div>
    <div class="right">
    </div>
  </div>
</body>

</html>

清除浮动

为什么要清除浮动

如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,

原因：子元素浮动后脱标 → 不占位置

目的:需要父元素有高度,从而不影响其它网页的布局.

清除浮动的方法

方法一：直接给父元素设置高度

方法二：给父元素内容的最后添加一个块级元素，给添加的块级元素设clear:both

方法三：单伪元素清除法

方法四：双伪元素清除法

方法五：给父元素设置 overflow:hidden

讲解方法三：单伪元素清除法

奉上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    /* 目标 */
    /* 清除浮动 */
    /* 首先给大盒子取消高度，如果继续在大盒子下面添加盒子则会在大盒子下面被盖住*/
    /* 盒子的浮动影响了下面标准流的布局 */
    * {
      /* 清除盒子内外边距 */
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .banner {
      /* 首先设置一个大盒子里面装着类名为left和right两个盒子 */
      width: 1226px;
      /* height: 460px; */
      background-color: red;
      margin: 0 auto;
    }

    .left {
      /* 给名叫left的盒子左浮动 */
      float: left;
      /* 给名叫left的盒子设置宽高 */
      width: 234px;
      height: 460px;
      background-color: #ffa500;
    }

    .right {
      /* 给名叫right右浮动 */
      float: right;
      /* 给名叫right的盒子设置宽高 */
      width: 992px;
      height: 460px;
      background-color: #87ceeb;
    }

    /* 方法三：单伪元素清除法 */
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    .box3 {
      /* 在大盒子下面设置一个盒子.box3 若没有设置单伪元素清除，.box3被大盒子覆盖*/
      /* 盒子的浮动影响了下面标准流的布局 */
      height: 300px;
      width: 300px;
      background-color: #ffa500;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <!-- 给大盒子添加单伪元素清除 -->
  <div class="banner clearfix">
    <!-- left盒子和right盒子相加的宽高不能大于banner那个大盒子 -->
    <div class="left"></div>
    <div class="right">
    </div>


  </div>
  <div class="box3"></div>
</body>

</html>

单伪元素清除

.clearfix::after {

content: "";

display: block;

clear: both;

/* 补充代码：在网页上看不到伪元素 */

height: 0;

visibility: hidden;

}

一个好好的程序员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于css的盒子的浮动属性和清除浮动属性（奉上代码）

属性值1左浮动float:left;2右浮动float:left注意事项（浮动的特点）一浮全浮1.浮动元素会脱标，在标准流中不占位置2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动4.浮动元素会受到上面元素边界的影响5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高6.浮动时,当父亲装不下浮动的子元素,此时此子元素会换行显示7.浮动的盒子只会影响浮动盒子后面的标
复制链接

扫一扫