CSS浮动
1，浮动：
float 属性可用的值
left：元素向左浮动
right： 元素向右浮动
none： 元素不浮动
inherit： 从父级继承浮动属性
2，clear 属性：
去掉浮动属性（包括继承来的属性）
clear 属性值：
left，right：去掉元素向左，向右浮动。
both：左右两侧均去掉浮动。
inherit：从父级继承clear 的值。
事例：
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>
</div>
</body>
</html>.CSS
#fd{
width: 100px;
height: 150px;
background-color: red;
float: left;
}
#sd{
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
#td{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#container{
width: 300px;
height: 500px;
background-color: darkgrey;
}
在浏览器中显示的效果：
CSS定位-浮动的简单应用
瀑布流
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="div1">
<ul>
<li><img src="Images/1.jpg"></li>
<li><img src="Images/2.jpg"></li>
<li><img src="Images/3.jpg"></li>
</ul>
<ul>
<li><img src="Images/4.jpg"></li>
<li><img src="Images/5.jpg"></li>
<li><img src="Images/6.jpg"></li>
</ul>
<ul>
<li><img src="Images/7.jpg"></li>
<li><img src="Images/8.jpg"></li>
<li><img src="Images/9.jpg"></li>
</ul>
</div>
</body>
</html>
.CSS
*{
/*所有的属性都集成该特性*/
margin: 0px;
padding: 0px;
}
li{
/*去掉默认的前缀点*/
list-style: none;
}
#div1{
width: 950px;
height: auto;
margin: 20px auto;
}
ul{
width: 250px;
float: left;
}
在浏览器中显示的效果：
转载请注明原文地址: https://ju.6miu.com/read-1301809.html
