html清除浮动的方法

css样式代码：

#div1{background: medium purple;}
#left{width: 200px;height: 100px;background: sky-blue;}
#right{width: 250px;height: 150px;background: pink;}

html代码：

<div id="div1">
    <div id="left"></div>
    <div id= "right"></div>
</div>

 

解决浮动的方法：

1.方法一：给父级元素宽度和高度（在设计稿高确定的情况下）

#div1{width:600px;height:300px;background: medium purple;}
 
#left{width: 200px;height: 100px;background: sky-blue;}
 
#right{width: 250px;height: 150px;background: pink;}

2.父级元素加上overflow：hidden（在设计稿宽固定的情况下）

#div1{background: medium purple;overflow:hidden}

3.给浮动元素加一个空标签，并设置它的样式clear：both

<div id="div1">
    <div id="left"></div>
    <div id= "right"></div>
    <div id="div2"></div>
</div> 

4.利用给浮动元素的父元素的伪类去除浮动

#div1:after{content:"";clear: both;display: block;}