清除网页float浮动影响

最新推荐文章于 2022-07-07 15:04:44 发布

es716

最新推荐文章于 2022-07-07 15:04:44 发布

阅读量619

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/MLeeM/article/details/50425115

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题：

清除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>