浮 动
浮动后的页面文档会出现 层的概念
浮动后的元素都会 到顶层 也就是文档流的上层 ，但是注意 浮动只会产生2层
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
ul {
list-style-type: none;
border: 1px solid #f00;
padding: 0;
}
li {
width: 200px;
height: 200px;
border: 1px solid #000;
/*给li 标签设置浮动的样式*/
/*float: left;*/
float: right;
}
.a1 {
background-color: #f0f;
}
.a2 {
background-color: #00f;
}
.a3 {
background-color: #f00;
}
.a4 {
background-color: #ff0;
}
</style>
</head>
<body>
<ul>
<li class="a1">1</li>
<li class="a2">2</li>
<li class="a3">3</li>
<li class="a4">4</li>
</ul>
</body>
</html>浮动的影响
1 若子元素浮动，父元素的大小是靠子元素称起的，子元素浮动后父元素则没有大小了
2 浮动后因为不在同一个图层中了所以，后面的元素会向上运动
去除浮动的影响
1 若子元素浮动，父元素的大小是靠子元素称起的，子元素浮动后父元素则没有大小了
2 浮动后因为不在同一个图层中了所以，后面的元素会向上运动
前面的元素若是浮动，则会遮挡住一部分后面的内容 缺陷
如何解决那？
清除浮动的方法：
1 父元素内部添加任意一个子元素 然后 设置该子元素的高度与 浮动的子元素的高度相同即可
2 同理 直接设置父元素的内容区域的大小即可
3 简单暴力 直接给受到浮动影响的元素添加 清除浮动对我的影响的样式
清除浮动要清除对应的浮动才能生效，
可以直接清除所有浮动带来的影响 both
<style>
ul {
list-style-type: none;
border: 1px solid #f00;
padding: 0;
margin: 0;
/*方式2*/
/*height: 202px;*/
}
li {
width: 200px;
height: 200px;
border: 1px solid #000;
/*给li 标签设置浮动的样式*/
float: left;
}
.a1 {
background-color: #f0f;
}
.a2 {
background-color: #00f;
}
.a3 {
background-color: #f00;
}
.a4 {
background-color: #ff0;
}
/*方式一*/
/*.clearA5{*/
/*float: none;*/
/*width: 1200px;*/
/*background-color: #49ff66;*/
/*}*/
div {
width: 1100px;
height: 250px;
background-color: cyan;
/*方式三*/
clear: both;
}
nav {
width: 100px;
height: 250px;
background-color: yellow;
}
</style>浮动特点
1浮动后的元素在使用margin-top 的时候不会收到边框塌陷了
2浮动后的元素可以任意的使用margin
3浮动后的元素默认是可以设置大小和在一行显示 浮动后的元素的本质是 行内块
在设置成block（块） 不生效
浮动构建布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构布局</title>
<style>
header, section, aside, footer {
background-color: #000;
font-size: 30px;
color: #fff;
text-align: center;
}
div {
width: 1000px;
border: 1px solid #f00;
}
header, footer{
height: 150px;
line-height: 150px;
}
footer{
clear: both;
}
section{
float: left;
width: 680px;
background-color: #666;
}
aside{
float: right;
width: 300px;
}
section, aside{
height: 400px;
line-height: 400px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<header>header</header>
<section>content</section>
<aside>sidebar</aside>
<footer>footer</footer>
</div>
</body>
</html>