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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。