详解浮动元素引起的问题和解决办法

详解浮动元素引起的问题和解决办法

在网页设计中，浮动元素常常用于实现图片和文字的排版布局，但同时也容易引起一些问题。本篇攻略将详细讲解浮动元素引起的问题和解决办法。

什么是浮动元素？

浮动元素是指在网页布局中，使用float属性将元素从正常的文档流中脱离出来，并向左或向右移动至其包含块的边界，直至碰到另一个浮动元素或包含块的边缘。通常用于实现文字环绕图片等排版效果。

img {
    float: left;
}

浮动元素引起的问题

问题一：高度塌陷

当一个元素浮动后，其父元素可能会出现高度塌陷的情况，即父元素的高度会变成0。这是因为浮动元素是脱离文档流的，父元素不再将其视为包含块，从而导致高度不能被撑开。

<div class="parent">
  <img src="example.jpg" alt="example" />
  <p>这是一段文字</p>
</div>

<style>
  img {
    float: left;
  }
</style>

上述代码中，图片浮动后，父元素.parent的高度变成了0。可以使用以下方法解决：

1. 为父元素添加overflow: auto属性
2. 父元素处使用清除浮动方式，例如使用clearfix类

.parent {
    overflow: auto;
}

或

<div class="parent clearfix">
  <img src="example.jpg" alt="example" />
  <p>这是一段文字</p>
</div>

<style>
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

问题二：重叠

当一个元素浮动后，其它元素可能会和它重叠，造成视觉上的问题。

<div class="parent">
  <img src="example.jpg" alt="example" />
  <p>这是一段文字</p>
  <div class="child"></div>
</div>

<style>
  img {
    float: left;
    margin: 20px;
  }
  .child {
    height: 200px;
    width: 200px;
    background-color: red;
  }
</style>

上述代码中，.child元素和图片重叠了。解决方法可以使用以下几种：

1. 为受影响的元素添加clear属性。

.child {
    clear:both;
}

1. 为父元素添加overflow属性。

.parent {
    overflow: auto;
}

示例说明

示例一：浮动内容多行时导致的溢出问题

当图片浮动后，其下面的文字会向上贴紧图片，如果图片高度不够容纳所有文字，那么文字就会溢出。

代码如下：

<div class="container">
  <img src="example.jpg" alt="example" />
  <p>这是一段很长的文字，没有结束时间一直延续下去非常长，超过了图片的高度。</p>
</div>

<style>
  img {
    float: left;
    margin-right: 20px;
  }
  p {
    margin: 0;
  }
</style>

解决方案是在文字上方加一个空标签，并添加clear属性：

<div class="container">
  <img src="example.jpg" alt="example" />
  <div class="clear"></div>
  <p>这是一段很长的文字，没有结束时间一直延续下去非常长，超过了图片的高度。</p>
</div>

<style>
  img {
    float: left;
    margin-right: 20px;
  }
  p {
    margin: 0;
  }
  .clear {
    clear: both;
  }
</style>

示例二：使用BFC解决浮动导致的高度塌陷

在父元素上添加overflow: auto可以解决高度塌陷的问题，但也可能会造成滚动条出现的问题。这时候可以使用BFC（块级格式化上下文）来解决。

代码如下：

<div class="parent">
  <img src="example.jpg" alt="example" />
  <p>这是一段文字</p>
</div>

<style>
  .parent {
    display: flow-root;
  }
  img {
    float: left;
  }
</style>

上述代码中，.parent元素使用了flow-root属性，即创建了一个新的BFC容器。这样就可以不用为其添加overflow属性也能解决高度塌陷的问题。