清除CSS浮动效果

父级DIV标签（红色背景）中有两个子级DIV标签A1（绿色背景）,A2（蓝色背景）；

1.运行一下代码，若两个子级标签向左浮动，则会“脱离”父级标签控制，看不到父级标签

<div style="background-color: red;width: 1000px;border:1px solid black;padding: 10px">

    <div style="height: 200px;background-color: green;width: 400px;float: left" >A1</div>
    <div style="height:200px;background-color: BLUE;width: 400px;float: right">A2</div>
</div>

我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们可以用两种方法清除浮动。

 方法一：用 clear: both清除浮动

 

在代码中加入<div style="clear: both"></div>则会消除浮动效果,父级标签重新掌握子级标签。

    <div style="background-color: red;width: 1000px;border:1px solid black;padding: 10px">

        <div style="height: 200px;background-color: green;width: 400px;float: left" >A1</div>
        <div style="height:200px;background-color: BLUE;width: 400px;float: right">A2</div>
        <div style="clear: both"></div>
    </div>

方法二：用overflow: hidden清除浮动。

在父级标签中加入overflow: hidden则会消除浮动效果,父级标签重新掌握子级标签,效果同方法一。

<div style="background-color: red;width: 1000px;border:1px solid black;padding: 10px;overflow: hidden">

        <div style="height: 200px;background-color: green;width: 400px;float: left" >A1</div>
        <div style="height:200px;background-color: BLUE;width: 400px;float: right">A2</div>
    </div>