????竹???CSS5 > DIV CSS???? >

float????_css????float???

?????????2013-03-04 08:48:25 ?????css5.com.cn

div+css??float?????css float?‾???DIV CSS float???????‾???float????????

Css?????float????????????????????????鉸<div>????????<span>?????<a>?????<em>?????html??????????????????????????????????????????????float:left??????????????(float:right)??

float?????????
float?????????????????????????????????css?????float??????float?????????

float??????
???css????float??????????div?????????????????????????

float?????????
  1. float??
  2. float??????‾?
  3. float????????
  4. css???????????
  5. css???????

???float??

Float?????????left??right??none
Float:none ????????
Float:left ??????
Float:right ???????

float????
float : none | left |right

???????
none : ??????????
left : ???????????
right : ???????????

 

css Float???????????
????????float??????

??????????????????div+css???????float??邦??阱?

????float??????‾?

Float?????????????????????????????????????????????????DIV??SPAN????????????????

???????

div{float:left} /* css????????div??????????left?? */ 
div{float:right} /* css????????div??????????(right) */

????css float????????

??????????????????????????????????2????????????????css????????完??????????????????????????????????

1???????html??????曳?

<div class="CSS5"> 
<div class="CSS5_left">?????????</div>
<div class="CSS5_right">??????????</div>
<div class="clear"></div><!-- html???????float???????? -->
</div>

2??css??????曳?

.CSS5{ width:400px;padding:10px;border:1px solid #F00} 
.CSS5_left{ float:left;width:150px;border:1px solid #00F;height:50px}
.CSS5_right{ float:right;width:150px;border:1px solid #00F;height:50px}
.clear{ clear:both}

3??完?????

float css?????‾???e??????
css div????float?‾???e??????

???css+div??????????e?????????????

DIV CSS????
Css???????????????????????????????????div??????????????????????????妊??????
css5.com.cn CSS???????????完???????
float???????

1??????????????????????????300px??????200px??css?????box??css????????????㏒?????px?????????
.box{width:300px; height:200px;}

2??????box??????????????css????????yangshi?????????????????????120px?????????
.yangshi{ width:120px; float:right; background:#0066FF;}

3??????????????div+css???
img { float: left;}

4??body???div?????????????

 <div class="box">
<div class="yangshi">????css5.com.cn ?????????????</div>
<img src="demo.gif" />
</div>

?????????img????????????????????demo.gif

?????????????
css float???

CSS????
????????????????div+css??????妊???????????????????????????????????????????????????????(???css ????)?????????????????yangshi??float:right;?float:left????css???img { float: left;}?img { float: right;}
CSS???????㏒?

.box{width:300px; height:200px;}
.yangshi{ width:120px; float:right; background:#0066FF;}
img{ float:left;}

html?快?css?????????????
????????????????㏒?
 

div+css??fllat??????

??????????????css??????????float?忘????????????????????????????????????CSS???????

?]css???????

??????????????????????( text-align:left)????( text-align:right)?????????????html????????????????????float?????????扭??孝????????孝???????????????????????????????css?????????????????????????????css margin?????????????????????float:right?????????????float:left??????阱?

???(Tag): float
???????URL?????/css/93.shtml

?????css5

??????span??div?‾?????????
??????DIV CSS ??忱 css?????忱