您的位置：首页 > Web前端 > CSS

CSS定位-浮动

2016-08-15 14:02 357 查看

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;
}

在浏览器中显示的效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航