css 浮动和本质和为什么需要清除浮动及用法

流氓也是种气质 _Cookie

已于 2022-01-24 17:11:39 修改

阅读量320

点赞数

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

于 2022-01-14 09:35:52 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/122487391

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.浮动的本质：是为了让多个块级元素在一行上显示

2.为什么需要清除浮动：有些时候我们的父盒子不方便给高度。而是让子盒子的内容撑开盒子，这样会导致父盒子的高度为0，清除浮动后父盒子能检测出高度

3.一行有一个元素浮动后，其他元素均需设置浮动避免布局错乱（开发细节）

4.嵌套的盒子子盒子设置浮动，定位后在设置margin-top ,则不会存在外边距塌陷问题（开发细节）

5.使用浮动可清除行内块级元素（input button img）的空隙（开发细节）

<!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>css float的本质</title>
  <!-- 浮动的本质是为了多个块级元素在一行上显示 -->
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    /* 浮动的三个特性 浮（脱标不占有位置），漏，特 */
    /* 父盒子如果有border padding margin的情况时浮动盒子是如何摆放的 */
    .father {
      width: 200px;
      height: 200px;
      /* border: 10px solid purple;
      padding: 20px; */
      margin: 20px;
      background-color: pink;
    }
    .one {
      float: left;
      width: 50px;
      height: 50px;
      background-color: yellowgreen;
    }
    /* 浮动的盒子只影响后面的盒子 */
    /* 很多时候我们的父盒子不方便给高度，由盒子的内容撑开高度 */
    .father1 {
      width: 200px;
      background-color: pink;
    }
    .one1,
    .two1 {
      float: left;
      /* width: 100px; */
      background-color: red;
    }
    .two1 {
      background-color: tomato;
    }
    /* 清除浮动  
    1.额外标签法在最后浮动的盒子添加，缺点会影响布局 */
    .clear {
      clear: both
    }
    /* 后面三种都是给父盒子设置  子不教父之过 */
    /*2.缺点会影响元素无法显示全  */
    .father1 {
      /* overflow: hidden; */
      /* overflow: auto;
      overflow: scroll; */
    }
    /*3.单伪元素  */
    .clearfix::after {
      content: '';
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }
    .clearfix {
      *zoom: 1;   /*ie6 7 的写法  */
    }
    /* 4.双伪元素清除浮动 */
    .clearfix:before,
    .clearfix:after {
    content: "";
    display: table;
    }
    .clearfix:after {
    clear: both;
    }

    /* 清除行内块元素的空隙 */
    .clear_interspace input,
    .clear_interspace button {
      float: left;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="one"></div>
  </div>

  <div class="father1  clearfix">
    <div class="one1">
      <p>123</p>
      <p>123</p>
      <p>123</p>
    </div>
    <div class="two1">
      <p>1234</p>
      <p>1234</p>
      <p>1234</p>
      <p>1234</p>
    </div>
    <!-- <div class="clear"></div> -->
  </div>

  <div class="clear_interspace">
    <input type="text">
    <input type="text">
    <button>按钮</button>
    <img src="./1.png" alt="">
  </div>
  
</body>
</html>

流氓也是种气质 _Cookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 浮动和本质和为什么需要清除浮动及用法

1.浮动的本质：是为了让多个块级元素在一行上显示2.为什么需要清除浮动：有些时候我们的父盒子不方便给高度。而是让子盒子的内容撑开盒子，这样会导致父盒子的高度为0，清除浮动后父盒子能检测出高度3.一行有一个元素浮动后，其他元素均需设置浮动避免布局错乱（开发细节）4.嵌套的盒子子盒子设置浮动，定位后在设置margin-top ,则不会存在外边距塌陷问题（开发细节）<!DOCTYPE html><html lang="en"><head&gt..
复制链接

扫一扫