div标签消除浮动

（1）

<div id="id1" style="width:300px;border:1px solid black">  

    <div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一个div</div>

    <div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二个div</div>

</div>

代码（1）的截图为，可以看到，id2和id3并没有在id1中。这就是没有清除浮动的效果。

清除浮动的方法：

1、对父级设置合适的高度：对父级设置合适的高度进行清除浮动，父级内内容的高度为20px+2px=22px，在id1中增加样式height=“22px”即可。

效果图：。

缺点：对父级设置合适的高度来清除浮动的这种方法必须要知道父级内容的高度。比较不方便。

2、clear:both清除浮动：在父级元素结束前，增加以下红色代码，清除浮动。

<div id="id1" style="width:300px;border:1px solid black"> 

    <div id="id2" style="width:100px;height:20px;float:left;border:1px solid red">第一个div</div>

    <div id="id3" style="width:100px;height:20px;float:left;border:1px solid blue">第二个div</div>

    <div id="id4" style="clear:both"></div>  /*增加此句，清除浮动*/

</div>

效果图：。

3、父级div定义overflow:hidden清除浮动：

id1增加overflow:hidden样式，即可清除父级元素内使用float:left/float:right产生的浮动。

效果图：。

 

以上是清除浮动的三种方法，望大神指教。

参考：https://www.cnblogs.com/xiaobaodejimama/p/5885114.html