浮动（浮动和清除浮动）

最新推荐文章于 2024-11-01 19:34:36 发布

你想要那颗糖

最新推荐文章于 2024-11-01 19:34:36 发布

阅读量303

点赞数

分类专栏： HTML+CSS 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_50260510/article/details/129481677

版权

HTML+CSS 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、浮动的基本属性

1.属性名：float

2.取值：left，right

3.作用：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

二、浮动的特点：

（1）浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中

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

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

（4）浮动元素会受到上面元素边界的影响，比如标准流

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

（6）行内元素浮动之后,可以直接设置宽高,块级元素浮动之后,宽高由内容默认撑开

（7）注意点：浮动的元素不能通过text-align:center或者margin:0 auto

三、浮动布局的注意点

1. 浮动一般情况下和标准流的父盒子一起搭配使用.

（1）先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

（2）标准流:垂直布局;浮动:水平布局

2.浮动的时候,当父元素装不下浮动的子元素时,子元素会换行显示

3.一个元素浮动了，理论上其余的兄弟元素也要浮动. 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

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

子浮父不浮,兄弟一起浮

四、清除浮动

1.为什么要清除浮动?

如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,原因:子元素浮动后脱标 → 不占位置

2.清除浮动的方法：

① 直接设置父元素高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

② 额外标签法

1. 在父元素内容的最后添加一个块级元素

2. 给添加的块级元素设置 clear:both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

③ 单伪元素清除法

操作：用伪元素替代了额外标签： .clearfix { /* IE6、7 专有 */ *zoom: 1; }

优点：项目中使用，直接给标签加类即可清除浮动

④ 双伪元素清除法

优点：项目中使用，直接给标签加类即可清除浮动

⑤ 给父元素设置overflow : hidden

操作：直接给父元素设置 overflow : hidden

特点：优点：方便

3.清除浮动代码展示：

<!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;
    }

    .box {
      overflow: hidden;
      width: 800px;
      /* 1 给父元素设置高度 */
      /* height: 200px; */
      background-color: pink;
      margin: 100px auto 0;
    }

    .box div {
      float: left;
      width: 200px;
      height: 200px;
      background-color: red;
    }

    footer {
      height: 100px;
      background-color: blue;
    }

     /* 2 额外标签法 不推荐,因为会让结构变得非常复杂  */
    .clear {
      /* 清除浮动 */
      clear: both;
    }

     /* 3. 单伪元素清除法 */
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
       补充代码
      height: 0;
       隐藏
      visibility: hidden;
    }

    
     /* 4.双伪元素清除法 */
    .clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
    }

    .clearfix::after {
      clear: both;
    }

    /* 兼容低版本浏览器 */
    .clearfix {
      *zoom: 1
    }


    /* 5.overflow:hidden; */

    /* 
    为什么要清除浮动?
      如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,
      原因:子元素浮动后脱标 → 不占位置
      解决办法:给父元素高度即可,但是有些情况下是不方便给高度,例如京东的为您推荐模块
    */
    /* 清除浮动的方法: 
          1.给父元素设置高度(有些场景不方便设置高度 例如新闻列表 京东为您推荐)
          2.额外标签法(在父元素内容最后添加一个块级标签,然后再设置clear:both) 
          3.单伪元素(其实就是额外标签法升级版本 京东采用就是单伪元素)
          4.双伪元素(小米采用就是双伪元素)
          5.给父元素设置overflow: hidden;
      */
  </style>
</head>

<body>
  <div class="box clearfix">
    <div></div>
    <div></div>
    <!-- <p class="clear"></p> -->
  </div>
  <footer></footer>
</body>

</html>