浮动及高度塌陷

我拿青春赌未来~

已于 2022-07-03 08:37:49 修改

阅读量347

点赞数 2

文章标签：浮动文档流高度塌陷清除浮动浮动元素

于 2022-05-04 12:47:29 首次发布

本文链接：https://blog.csdn.net/helongzhi/article/details/124566761

版权

一.什么是浮动

float（浮动），会使元素向左或者向右移动，其周围的元素也会重新排列。

二.浮动的用法

float

属性值：none 默认值，元素不浮动

left 元素向左浮动

right 元素向右浮动

注意：

浮动的元素不会覆盖住文章，文字会自动环绕在浮动元素周围

所以可以利用浮动来设置文字环绕图片的效果

浮动的特点： 1.浮动元素脱离文档流之后不会在占用文档流的位置，它下面的元素会立即向上移动

举例：

   <style>
    

.box{background-color: red;
height: 200px;
width: 200px;}
.box1{background-color: yellow;
   height: 400px;
  width: 400px;}

    </style>
</head>
<body>


<div class="box"></div>
<div class="box1"></div>


</body>

正常情况下，黄色方块是在红色方块下面的下面

当我们为红色方块设置左浮动时，黄色方块会向上移动


    <style>
    

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

    </style>
</head>
<body>


<div class="box"></div>
<div class="box1"></div>


</body>

2.浮动的元素会移动到父元素的左侧或者右侧

<style>
    
.fu{width: 800px;
    height: 800px;
    border:1px solid blue;
     margin: 0 auto;}
.box{background-color: red;
height: 200px;
width: 200px;
 float: left;}
.box1{background-color: yellow;
   height: 400px;
  width: 400px;
 float: right;}

    </style>
</head>
<body>


<div class="fu" >
  <div class="box"></div>
  <div class="box1"></div>
  

</div>

3.浮动元素不会溢出父元素

4.浮动元素上面是一个没有浮动的块元素，则浮动元素无法上移

举例

红色方块不设置浮动

给黄色方块设置左浮动

  <style>
    

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

    </style>
</head>
<body>


  <div class="box"></div>
  <div class="box1"></div>
  


</body>

红色方块不设置浮动

给黄色方块设置右浮动

 <style>
    

.box{background-color: red;
height: 200px;
width: 200px;
 }
.box1{background-color: yellow;
   height: 400px;
  width: 400px;
 float: right;}

    </style>
</head>
<body>


  <div class="box"></div>
  <div class="box1"></div>
  


</body>

脱离文档流的特点（元素设置浮动从文档流中脱离以后，元素的一些特点也会发生改变）

块元素：

1.不会独占一行

2.块元素的宽高被内容撑开

行内元素：

行内元素脱离文档流会变成块元素，特点与块元素相同

总结：脱离文档流之后不区分块元素和行内元素

三.高度塌陷及如何解决高度塌陷

正常情况下：

 <style>
    

.box{border:1px solid red;
 }
.box1{background-color: yellow;
   height: 400px;
  width: 400px;
 }

    </style>
</head>
<body>


  <div class="box"><div class="box1"></div></div>
  
  


</body>

当我们给黄色盒子设置浮动

 <style>
    

.box{border:1px solid red;
 }
.box1{background-color: yellow;
   height: 400px;
  width: 400px;
 float:left;}

    </style>
</head>
<body>


  <div class="box"><div class="box1"></div></div>
  
  


</body>

我们可以看黄色盒子的父元素高度丢失，这就是高度塌陷

高度塌陷：

在正常的文档流当中，父元素高度是被子元素撑开的

若子元素浮动，脱离文档流，会导致我们父元素高度丢失，我们叫高度塌陷

解决高度塌陷的方法：

1.清除浮动：clear

属性值：

none默认值不清除浮动

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

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

both 清除两侧浮动元素对当前元素的影响

我们可以在box父元素中，在box1（浮动盒子）后面加一个空盒子（box2）来清除浮动，解决高度塌陷

 <style>
    

.box{border:1px solid red;
 }
.box1{background-color: yellow;
   height: 400px;
  width: 400px;
 float:left;}

.box2{clear:both}

    </style>
</head>
<body>


  <div class="box"><div class="box1"></div>

<div class="box2"></div>

</div>
  
  


</body>

这个方法不太推荐，毕竟加了一个无意义的标签，写一个还行，太多就有点泛滥了

2.给父元素设置固定高度（不建议使用，不够灵活）

3.将父元素添加属性overflow：hidden

缺点：有时候可能会和我们想得到的预期效果不一样

4.给父元素设置一个伪元素选择器，并设置常用的清除浮动的样式，然后after就会把盒子撑开

<style>
    

.box{border:1px solid red;
 }
.box1{background-color: yellow;
   height: 400px;
  width: 400px;
 float:left;}

.box::after{

  /* 添加一个内容 */
                content:" ";
                 /* 将内容转换为块元素 */
                 display:block;
                /* 清除两侧的浮动 */
                clear:both;
             
}

    </style>
</head>
<body>


  <div class="box"><div class="box1"></div>
</div>
  
  


</body>