css清除浮动的方法

时间 2019-11-17

标签 css 清除浮动方法栏目 CSS 繁體版

原文原文链接

一、对父级设置适合CSS高度，代码展现以下：html

<style>
.div_01{
   width:400px;
   border:1px solid #F00;
   background:#FF0; 
   height:102px;
} 

.div_01-left,.div_02-right{
   width:180px;
   height:100px;
   border:1px solid #00F;
   background:#FFF;
} 

.div_01-left{
   float:left;
} 

.div_02-right{
   float:right;
} 
</style>

<div class="div01"> 

    <div class="div_01-left">left浮动</div> 

    <div class="div_01-right">right浮动</div> 

</div>

二、clear:both清除浮动，代码展现以下：code

<style>
.div_01{
 width:400px;
 border:1px solid #F00;
 background:#FF0;
} 

.div_01-left,.div_02-right{
 width:180px;
 height:100px; 
 border:1px solid #00F;
 background:#FFF;
} 

.div_01-left{
 float:left;
} 

.div_02-right{ 
 float:right;
}

.clear{
 clear:both;
} 
</style>



<div class="div01"> 

    <div class="div_01-left">left浮动</div> 

    <div class="div_01-right">right浮动</div> 

    <div class="clear"></div> 

</div>

三、父级div定义 overflow:hiddenhtm

<style>
.div_01{
 width:400px;
 border:1px solid #F00;
 background:#FF0; 
 overflow:hidden;
} 

.div_01-left,.div_02-right{
 width:180px;
 height:100px;
 border:1px solid #00F;
 background:#FFF;
} 

.div_01-left{
 float:left;
} 

.div_02-right{
 float:right;
} 
</style>




<div class="div01"> 

    <div class="div_01-left">left浮动</div> 

    <div class="div_01-right">right浮动</div> 

</div>