CSS浮动 float

<!--
float 浮动
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
inherit 从父级继承浮动属性2

clear属性
去掉浮动属性
left right 去掉元素向左 向右浮动
both 左右两侧去掉浮动
inherit 从父级继承来clear的值
-->
<div id="custain">
<div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>

</div>

 

CSS 文件

 

#fd{
width: 50px;
height: 50px;
background-color: red;
float: left;

}
#sd{
width: 150px;
height: 50px;
background-color: green;
float: left;

}
#td{
width: 150px;
height: 50px;
background-color: blue;
float: left;
/* 去掉浮动*/
clear: left;

}
#custain{
width: 300px;
height: 200px;
background: gray;

}