清除网页float浮动影响

来源：互联网发布：传智播客 c语言编辑：程序博客网时间：2024/05/29 10:41

问题：

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

0 0