浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
属性:CSS float
CSS clear
DEMO1
div {
height: 200px;
width: 200px;
}
.box1 {
background-color: yellow;
float: right;
}
.box2 {
width: 400px;
background-color: black;
float: right;
height: 600px;
}
.box3 {
background-color: pink;
height: 400px;
float: right;
}
.box4 {
background-color: skyblue;
width: 300px;
float: right;
}
左右浮动例子
Demo2`
div {
height: 200px;
width: 200px;
}
.box1 {
background-color: red;
float: right;
}
.box2 {
background-color: yellow;
float: left;
}
.box3 {
background-color: black;
height: 300px;
width: 300px;
}
嵌套浮动例子
Demo3
.father {
/*height: 400px;*/
width: 700px;
border: #000000 1px solid;
/*height: 200px;*/
/*overflow: hidden;*/
/*overflow: auto;*/
/*display: table;*/
}
.clearFloat:after {
content: "";
display: block;
clear: both;
height: 0px;
visibility: hidden;
}
.son {
width: 200px;
height: 200px;
}
.son1 {
background-color: yellow;
float: left;
/*margin: 0 20px;*/
}
.son2 {
background-color: hotpink;
float: left;
}
.son3 {
background-color: black;
float: left;
}
.clear {
/*clear: both;*/
}