标签：浮动 元素 li background 0px 200px
浮动
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.有浮动就需要清除浮动
标签：浮动,元素,li,background,0px,200px 来源： https://www.cnblogs.com/Chen-Tan/p/12245364.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。