浮动
float:left/right;左浮动/右浮动
-
给了浮动的元素，只会影响后面的元素，支持高、宽；（任何元素都可以浮动）
-
若父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动元素回往下掉
若某一个元素较高，掉下来的元素会被挡住
对文字的概念：
浮动不会被浮动元素盖住，会形成一个环绕效果
文档流
普通元素在文档中默认排列的方式 不添加任何样式时，遵守基本的元素的排列方式
<!doctype html>
<html>
<head>
<title>浮动</title>
<style type="text/css">
div{height:100px;
background:red;}
span{background:blue;}
a{background:yellow;}
</style>
</head>
<body>
<div>
</div>
<span>几乎是国防建设的功夫</span>
<a href="">和v阿嘎</a>
</body>
</html>
浮动的一般情况
<!doctype html>
<html>
<head>
<title>浮动</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{font:40px "微软雅黑";}
ul{list-style:none;}
li{
float:left;
width:200px;
height:200px;
border:5px none orange;
<!-- 右浮动时顺序是4 3 2 1，要想顺序 可以父级右浮动，子级左浮动 -->
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4 </li>
</ul>
</body>
</html>
特殊情况
<!doctype html>
<html>
<head>
<title>浮动</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{font:40px "微软雅黑";}
ul{list-style:none;}
li{
width:200px;
height:200px;
border:5px none orange;
background:red;
}
#l1{background:yellow;}
#l2{background:blue;float:left;}
<!-- l2将会被l1覆盖，因为l1不占位置 -->
</style>
</head>
<body>
<ul>
<li id="l1">1</li>
<li id="l2">2</li>
<li>3</li>
<li>4 </li>
</ul>
</body>
</html>
清除浮动
clear:left/right/both;左/右/两边清除浮动
浮动会造成父级的塌陷，会对后面的布局造成影响
清除浮动可以清除浮动造成的影响
1.浮动元素本身不能清除浮动
子级元素最后加空标签: 如 .clarbox{clear:both;} 在li后加div标签，class=“clarbox”
2.父级元素：
加高度 //扩展性不好
加display:inline-block;/会解析空格 不建议使用/
加overflow:hidden;/强制性的重新检查父元素的子元素的内容 刚好需要时使用/
after伪元素内部末尾添加内容 /*如ul里的li标签浮动时 可以ul:after{ content:""; *
display: block; /其默认为行列元素/*
clear:both;}*/时下主流使用方式,可以添加共同class名
不至于每添加浮动都要写一次
3.有浮动就需要清除浮动