8.css的浮动特性

最新推荐文章于 2025-04-23 07:09:22 发布

堵车了

最新推荐文章于 2025-04-23 07:09:22 发布

阅读量361

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/weixin_45660035/article/details/120082727

版权

css 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了CSS元素浮动的特性，包括脱离标准流、行内块元素特点以及与父元素顶部对齐。同时，针对浮动元素导致的父元素高度坍塌问题，提出了四种清除浮动的方法：1) 使用after伪元素；2) 使用before和after双伪类；3) 给父元素添加overflow属性；4) 添加额外div。每种方法的代码示例均给出，帮助理解并解决布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.css元素浮动的特点

浮动的元素会脱离标准流(不再占用原先位置，浮动到指定位置)
浮动的元素具有行内块元素的特点（但是两个元素之间无默认外边距，紧贴在一起）
浮动的元素会与父元素的顶部对齐

2.清除浮动

原因:父元素在没有设置高度的情况下，让子元素都添加浮动特定，会导致父元素的高度坍塌（没有高度了），影响原本的布局。

注意：若父元素设置了高度，则不会出现父元素高度

<!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>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }
    .father div {
      float: left;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <!-- 此时父元素没有设置任何的高度，当其内部的四个子元素都添加浮动 -->
  <div class="father">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
  </div>
</body>

</html>

解决方式：
1.使用after伪元素清除

<!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>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    .father div {
      float: left;
      width: 100px;
      height: 100px;
    }

    /* 添加下面这段代码 */
    .father:after {
      /*伪元素是行内元素 正常浏览器清除浮动方法*/
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .father {
      *zoom: 1;
      /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
  </style>
</head>

<body>
  <div class="father">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
  </div>
</body>

</html>

2.使用before和after双伪类清除

<!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>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    .father div {
      float: left;
      width: 100px;
      height: 100px;
    }

    /* 添加下面这段代码 */
    .father:after,
    .father:before {
      content: "";
      display: table;
    }

    .father:after {
      clear: both;
    }

    .father { /* 兼容ie6 */
      *zoom: 1;
    }
  </style>
</head>

<body>
  <div class="father">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
  </div>
</body>

</html>

3.给父元素添加overflow实现（不推荐）

<!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>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
      overflow: hidden;
    }

    .father div {
      float: left;
      width: 100px;
      height: 100px;
    }

  </style>
</head>

<body>
  <div class="father">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
  </div>
</body>

</html>

4.添加一个额外div清除(不推荐)

<!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>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    .father .float {
      float: left;
      width: 100px;
      height: 100px;
    }

    /* 添加下面这段代码 */
    .father .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="float">test1</div>
    <div class="float">test2</div>
    <div class="float">test3</div>
    <div class="float">test4</div>
    <div class="clear"></div>
  </div>
</body>

</html>