6day-浮动

最新推荐文章于 2024-07-08 17:09:50 发布

DaB210

最新推荐文章于 2024-07-08 17:09:50 发布

阅读量969

点赞数 12

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

本文链接：https://blog.csdn.net/DaB210/article/details/137170515

版权

HTML&CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

浮动

什么是浮动布局

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边框为止。

浮动的属性

float:left | right | none

left:向左浮动
right：向右浮动
none：不浮动（默认值）

可能被阻挡的浮动元素

<!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>
      .wrap{
        width: 500px;
        border: 1px solid #000;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
      }
      .box2 {
        width: 200px;
        height: 300px;
        background-color: blue;
        float: left;
      }
      .box3 {
        width: 200px;
        height: 200px;
        background-color: green;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

3个盒子宽度均为200px，父元素宽度为500px，如为三个元素设置浮动，则第三个元素会在第二行显示。
将第二个盒子高度设为300px 其余两个盒子高度为200px，当都进行左浮动时，会发现，在第一个盒子的下方出现了100px的间隙，这是由于浮动元素在浮动过程中，当前浮动元素不会超过上一个浮动元素的底边，或当前父元素的顶边，所以造成留白间隙。

浮动的影响

浮动元素会脱离文档流，最终导致父盒子的高度塌陷。（如果父盒子没有设置固定高度的话）
不仅会对父盒子以外的布局产生影响，父盒子内部的一些元素也会因为浮动发生改变

文档流

元素一般会存在两种情况，一种是普通流（也叫文档流），另一种则是脱离文档流

普通流

也成为常规流，文档流。是文档可显示对象在排列时所占用的位置。可以将整个网页看作一个文档，这个文档自上而下分成一行行，并在每行当中从左至右的顺序依次排放元素。

脱离文档流

设置浮动、绝对定位的元素都会脱离文档流，此时该元素就不存在普通流中，而是漂浮在普通流元素的上方，就像云层。能够左右运动。

会让父元素高度塌陷：父元素中的元素设置了浮动之后，父元素内不存在其他内容了。就会导致父元素出现高度为0的现象，这就是高度塌陷
对兄弟元素的影响：浮动元素不会对前面的兄弟元素造成影响，但其后面的兄弟元素，会因为其脱离文档流，然后往上偏移，如果其中后面兄弟元素中带有文字内容，则文字会环绕在浮动元素的周围。

这是因为最初创造浮动的初衷，并不是为了元素的布局去使用。而是当时为了实现文字环绕图片的效果而发明。只是后面开发人员发现，用来做布局效果不错，所以才产生了浮动布局。也侧面说明浮动的脱离文档流并非真正意义上的脱离文档流（后面的定位元素才是真正的脱离文档流）。

解决浮动带来的影响—清除浮动

清除浮动–clear属性

用于“清除浮动”，规定元素的哪一侧不允许存在其他浮动元素

clear:both | left | right | none;

both:设置元素的左右两侧均不允许存在浮动元素
left：不允许左侧出现浮动元素
right：不允许右侧出现浮动元素
none：允许元素两侧出现浮动元素，默认值

清除兄弟元素之间的浮动影响

<!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>
      .wrap{
        width: 500px;
        border: 1px solid #000;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
      }
      .box3 {
        width: 200px;
        height: 300px;
        background-color: green;
        clear: left;
        margin-top: 250px;
      }
      .box4{
        width: 200px;
        height: 200px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

注意事项

并非所有浮动元素的所有兄弟元素都需要清除浮动，只需要对浮动元素的下一个兄弟元素设置清除浮动，后面所有的元素布局都会恢复
如果希望浮动元素与下一个兄弟元素之间有一定的间距，给下一个兄弟元素设置margin-top时会失效（会与上方空白处重叠），此时可以给浮动元素设置margin-bottom即可。

清除父元素高度塌陷影响

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>
      .wrap {
        width: 500px;
        border: 1px solid #000;
        overflow: hidden;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="wrap clearClass">
      <div class="box"></div>
    </div>
  </body>
</html>

原理：利用了overflow属性创建一个BFC（块级格式化上下文）

利用空标签解决父元素高度塌陷

<!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>
      .wrap {
        width: 500px;
        border: 1px solid #000;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
      }

      .clear{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="wrap clearClass">
      <div class="box"></div>
      <div class="clear"></div>
    </div>
  </body>
</html>

利用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>
      .wrap {
        width: 500px;
        border: 1px solid #000;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
      }
      .clearClass::after{
        content: "";
        display: block;
        clear: both;
        width: 0;
        height: 0;
      }
    </style>
  </head>
  <body>
    <div class="wrap clearClass">
      <div class="box"></div>
    </div>
  </body>
</html>

利用display 解决父元素高度塌陷

<!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>
      .wrap {
        width: 500px;
        border: 1px solid #000;
        display: flow-root;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="wrap clearClass">
      <div class="box"></div>
    </div>
  </body>
</html>