css的浮动详解

最新推荐文章于 2024-05-05 20:21:31 发布

诗霖雪

最新推荐文章于 2024-05-05 20:21:31 发布

阅读量1.5k

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_56713342/article/details/133914439

版权

一、什么是浮动？

浮动：就是使用float样式，使元素脱离文档流

可选值：

none 默认值，不设置浮动

left 向左浮动

right 向右浮动

二、浮动的特点

1、一旦元素设置了浮动，元素就会脱离文档流，它原来在文档流得位置，就会被它下面的元素挤上来

2、如果浮动元素它上面的元素不浮动，则浮动元素无法上移

3、浮动元素也不会超过它前面浮动元素

4、浮动元素不会超出它的父元素

5、当浮动元素遇到了文字，浮动元素不会覆盖文字，文字会环绕在浮动元素的周围，从而有文字环绕图片的效果。这也是设置浮动最开始的想要的效果。

6、当元素设置浮动以后，会完全脱离文档流，元素脱离文档流后，元素原来在文档流得特点，就都没有了，也就是说不再区分块，行内，行内块。

三、什么是高度塌陷？

一般情况下，我们是不给父元素设置高度的，让其内部的子元素自动撑开父元素的高度，这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。

四、高度塌陷的解决方案

解决方案一、

给父元素设置自己的高度，但不推荐使用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">

      .outer {
        border: 10px red solid;
        height: 100px;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>

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

解决方案二、

给元素开启BFC（块级格式化上下文）

BFC是元素自带的一个属性，默认是关闭的状态，一旦开启了，这个元素就会成为一个独立区块

具有一些特点，这些特点，可以帮助我们解决一些问题

1、开启BFC的元素，垂直方向外边距不会重叠

2、开启BFC的元素，不会被浮动元素覆盖

3、开启BFC的元素，会包含住浮动元素，可以解决高度塌陷问题

如何开启BFC

1、设置浮动

可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响

2、将元素转成行内块

可以解决高度塌陷，但宽度会丢失，且有三像素问题

3、overflow属性非visible值

副作用最小，建议使用

4、开启绝对定位

可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .outer {
        border: 10px red solid;
        float: left;
        /* display: inline-block; */
        /* overflow: hidden; */
        /* 开启绝对定位 */
        /* position: absolute; */
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        /* 设置透明度  0-1  0是透明，1是不透明*/
        opacity: .3;

        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
        /* 解决外边距重叠问题 */
        overflow: hidden;

      }
      /* .box4{
        width: 50px;
        height: 50px;
        background-color: green;
        margin-top: 50px;

      } */
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3">
        <div class="box4"></div>
    </div>
  </body>
</html>

清除浮动

clear可以用来清除其他浮动元素对当前元素的影响

可选值：

none，默认值，不清除浮动

left，清除左侧浮动元素对当前元素的影响

right，清除右侧浮动元素对当前元素的影响

both，清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: right;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
      }
      /* 需求：消除box2浮动对box3的影响 */
      .box3 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        clear: both;
      }
    </style>
  </head>
  <body>
    <!-- 需求，设置box1左浮动，box2右浮动，而box3待在原地不动 -->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </body>
</html>

解决高度塌陷方案三

可以在浮动元素下面添加一个空白的块元素，由于这个块元素没有浮动，还在文档流中

可以给这个块元素设置清除浮动，让其撑开父元素的高度

缺点是页面多了一个空白的结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .box3{
        background-color: yellowgreen;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </bod

解决方案四

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，

这样做和添加一个div的原理一样，可以达到一个相同的效果，

而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .clearfix::after {
        content: "";
        /* display: block; */
        display: table;
        clear: both;
      }
      .w{
        width: 1200px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="box1 clearfix">
      <div class="box2"></div>
      <!-- <div></div>  -->
    </div>
  </body>
</html>

完善方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 300px;
        height: 300px;
        background-color: #bfa;
        /* 父子外边距重叠解决一 */
        /* overflow: hidden; */
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin-top: 100px;
      }

      /* 演示高度塌陷 */
      .box3 {
        border: 10px red solid;
      }

      .box4 {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        float: left;
      }
      /* 
      解决父子外边距重叠
      解决高度塌陷 
      */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }

    </style>
  </head>
  <body>
    <div class="box1 clearfix">
      <div class="box2"></div>
    </div>
    <div class="box3 clearfix">
      <div class="box4"></div>
    </div>
  </body>
</html>

诗霖雪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css的浮动详解

浮动：就是使用float样式，使元素脱离文档流可选值：none 默认值，不设置浮动left 向左浮动right 向右浮动一般情况下，我们是不给父元素设置高度的，让其内部的子元素自动撑开父元素的高度，这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。
复制链接

扫一扫