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

CSS浮动&简单瀑布流布局

2017-03-30 15:22 357 查看

浮动（float）

float属性

left：元素向左浮动

right：元素向又浮动

none：元素不浮动

inherit：从父级继承浮动属性

clear属性

left、right：去掉元素向左右浮动

both：左右两侧均去掉浮动

inherit：从父级继承来clear的值

练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.c1{
width: 100px;
height: 100px;
background-color: brown;
float:left;
}
.c2{
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
.c3 {
width: 100px;

4000
height: 150px;
background-color: green;
float: left;
}
.c4{
width:500px;
height: 500px;
background-color: bisque;
}
.c5{
clear:both;/*去掉浮动*/
}
</style>
</head>
<body>
<div class="c4">

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c5">hello world!!!!!!!</div>

</div>
</body>
</html>

效果

简单瀑布流布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局效果</title>
<style type="text/css">
*{
margin: 0px;
padding:0px;
}

li{
list-style: none;
}

.class1{
width: 1000px;
height: auto;
margin: 20px auto;/*上下20px，左右自适应*/
}
ul{
width: 300px;
float:left;
}
img{
width: 150px;
}

</style>
</head>
<body>
<div class="class1">
<ul>
<li><img src="bd_logo1.png"></li>
<li><img src="bd_logo1.png"></li>
<li><img src="bd_logo1.png"></li>
</ul>
<ul>
<li><img src="bd_logo1.png"></li>
<li><img src="bd_logo1.png"></li>
<li><img src="bd_logo1.png"></li>
</ul>
<ul>
<li><img src="bd_logo1.png"></li>
<li><img src="bd_logo1.png"></li>
<li><img src="bd_logo1.png"></li>
</ul>
</div>
</body>
</html>

瀑布流效果

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

标签：

相关文章推荐

新的分享

章节导航