<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>笔记6</title>
<style>
/*样式初始化*/
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
/*盒子的大小和位置*/
.box{
width: 800px;
margin: 0 auto;
}
.box ul li{
width: 180px;
height: 200px;
float: left;/*浮动*/
margin: 10px;
background-color: pink;
}
.main{
width: 100%;
height: 100px;
margin: 0 auto;
color: #fff;
text-align: center;
line-height: 100px;
background-color: #000;
}
/* .box ul::after{
content: "";
display: block;此元素将显示为块级元素
clear: both;
} */
.box .con{
width: 180px;
height: 200px;
float: left;/*浮动 */
margin: 10px;
background-color: pink;
}
.box .clear{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<div class="box">
<div class="con">a</div>
<div class="con">b</div>
<div class="con">c</div>
<div class="clear"></div>
</div>
<div class="main">底部</div>
浮动:
1.浮动使元素脱离文档普通流,漂浮在普通流之上<br/>
2.浮动元素依然按照其在普通流的位置上出现,然后尽可能的根据设置的浮动方向进行浮动
直到遇到边缘框或另外一个浮动元素为止,并且允许文本和内联元素环绕<br/>
3.浮动会产生块级框,而不管元素本身是什么
清除浮动的方法:
1.在浮动元素的后面加上一个块级元素,只有当清除ul-li标签是才使用伪类清除<br/>
2.直接给ul设置高度,缺陷是当不知道具体高度时还是会浮动。只有当知道具体大小时才能用高度来清除浮动<br/>
3.直接在末尾添加一个块级元素,给末尾的块级元素添加clear: both;属性
</body>
</html>
web前端6
最新推荐文章于 2020-09-09 19:44:35 发布