清除网页float浮动影响

最新推荐文章于 2024-06-08 18:37:56 发布

原创最新推荐文章于 2024-06-08 18:37:56 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了清除浮动对布局影响的解决方法，包括使用clear:both属性、设置宽度和溢出属性，通过具体代码实例展示了如何有效解决问题。

问题：

清除float属性对其他元素的影响。

解决方法：

第一种：对受到影响的元素clear:both属性。
第二种：对受到影响的元素设置宽度和溢出width:100%;overflow:hidden;属性。

测试代码：

 1. 有问题代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动</title>
</head>
<body>
  <div style="height:100px; background-color:#6CF; float:left;">
    <p>div1</P>
    <P>清除浮动测试</P>
  </div>
  <div style="height:100px; background-color:#0C6; float:left;">
    <p>div2</P>
    <P>清除浮动测试</P>
  </div>
  <div style="height:100px; background-color:#F63;">
    <p>div3</P>
    <P>清除浮动测试</P>
  </div>
</body>
</html>

 2. 解决方法一：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动</title>
</head>
<body>
  <div style="height:100px; background-color:#6CF; float:left;">
    <p>div1</P>
    <P>清除浮动测试</P>
  </div>
  <div style="height:100px; background-color:#0C6; float:left;">
    <p>div2</P>
    <P>清除浮动测试</P>
  </div>
  <div style="clear:both; height:100px; background-color:#F63;">
    <p>div3</P>
    <P>清除浮动测试</P>
  </div>
</body>
</html>

 3. 解决方法二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动</title>
</head>
<body>
  <div style="height:100px; background-color:#6CF; float:left;">
    <p>div1</P>
    <P>清除浮动测试</P>
  </div>
  <div style="height:100px; background-color:#0C6; float:left;">
    <p>div2</P>
    <P>清除浮动测试</P>
  </div>
  <div style="width:100%; overflow:hidden; height:100px; background-color:#F63;">
    <p>div3</P>
    <P>清除浮动测试</P>
  </div>
</body>
</html>