前端学习笔记（二）--CSS中清除浮动及清除浮动技巧
程序员文章站
2022-03-29 22:45:41
...
浮动原理图
一、（1）清除浮动：就是可以去掉前面对象浮动，对后面对象的影响。（浮动浮动，先浮后动，浮动的对象会先漂浮起来，离开原来的位置，而后动就是指其后面的对象。会向他原来的位置上，动起来。）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>文档流布局</title>
<style type="text/css">
body,ul,li,img,div{margin:0px;padding:0px;}
body{padding:100px;}
div{
width:100px;
height:100px;
font-size:12px;
font-weight:bold;
}
#one{background:red;float:left;}
#two{background:green;width:200px;height:200px;clear:both;(这一句是后加的)}
#three{background:blue;}
</style>
</head>
<body>
<div id="one" >1</div>
<div id="two">2</div>
<div id="three">3</div>
</body>
</html>（2）、现在来做一个实践案例：常见的博客布局如下图所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>文档流布局</title>
<style type="text/css">
body,ul,li,img,div{margin:0px;padding:0px;}
#left{background:red;width:200px;height:200px;float:left;}
#right{background:green;width:300px;height:300px;float:right;}
#footer{background:blue;height:50px;clear:both;/*清除上面浮动对我的影响，这一句是最后加上的*/}
</style>
</head>
<body>
<div id="left" >左</div>
<div id="right">右</div>
<div id="footer">版权</div>
</body>
</html>
（3）、现在我们来看一些小案例：
为什么，原来在同一行的两个块，会因为浏览器窗口的大小改变，而改变其原来的位置：我们可以用通过给其添加父元素，控制他们整体的宽度。
<div id="main">
<div id="left" >左</div>
<div id="right">右</div>
</div>样式表：
#main{height:400px;width:800px;}二、清除浮动技巧：
（1）定位布局：就是可以通过元素的position属性控制元素的位置；
当我们想用绝对定位时，必须具有两个条件：
（1）必须给父元素加定位属性，一般建议使用：position：relative；
（2）给子元素加，加绝对定位：position：absolute；同时要加方向属性；
相对定位与绝对定位：
绝对定位是以父元素为基准点，进行定位；-----会离开文档流
相对定位是根据其自身为基准点，进行定位；-----离开原位置，但是还占着原空间
下面是一个小案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>绝对定位布局</title>
<style type="text/css">
body,ul,li,img,div{margin:0px;padding:0px;}
body{padding:100px;}
div{
width:100px;
height:100px;
font-size:12px;
font-weight:bold;
}
#one{background:red;}
#two{background:green;top:100px;left:100px;position:absolute;}
#three{background:blue;}
#main{width:500px;height:500px;border:1px solid black;margin:100px auto;position:relative;（这句是之后加上的）}
</style>
</head>
<body>
<div id="main">
<div id="one" >1</div>
<div id="two">2</div>
<div id="three">3</div></div>
</body>
</html>
（2）相对定位：（以一个专题为例）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>相对定位布局</title>
<style type="text/css">
body,ul,li,img,div,a{margin:0px;padding:0px;text-decoration:none;}
body{background:url(images/bodyBg.jpg) no-repeat center; margin-top:5px;}
a{display:block;color:black;}
#header{width:960px;height:404px;margin: 0 auto;position:relative;}
#logo{width:230px;height:38px;position:absolute;top:10px;left:30px;}
#header ul.nav{/*width:415px;height:21px;*/float:right;list-style: none;vertical-align: top;background:#ccc;/*背景颜色调试法*/}
#header .nav li {float: right;font-size: 16px;margin-right: 19px;margin-top:25px;}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://www.itcast.cn/" target="_blank" id="logo"><img src="images/logo.png" alt="传智播客"></a></h1>
<ul class="nav">
<li><a href="/" class="afont ">首页</a></li>
<li><a href="/open" class="afont ">公开课</a></li>
<li><a href="/course" class="afont ">免费****</a></li>
<li><a href="/map" class="afont ">学习路线图</a></li>
<li><a href="http://bbs.itheima.com/forum.php?yun" class="afont" target="_blank">技术社区</a></li>
</ul>
</div>
</body>
</html>
CSS清除浮动float的三种方法小结
一、浮动的定义
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
ps:文档流：文档流是文档中可显示对象在排列时所占用的位置 。
语法
float常跟属性值left、right、none
float:none 不使用浮动
float:left 靠左浮动
float:right 靠右浮动
二、浮动的用途
可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。
三、浮动用法
分析HTML结构：
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
分析CSS代码样式：
.box {
border: 1px solid #ccc;
background: #fc9;
color: #fff;
margin: 50px auto;
padding: 50px;
}
.div1 {
width: 100px;
height: 100px;
background: darkblue;
float: left;
}
.div2 {
width: 100px;
height: 100px;
background: darkgoldenrod;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: darkgreen;
float: left;
}
清除浮动
方法一：添加新元素，应用clear：both;
HTML：
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS：
.clear {
clear: both;
height: 0;
line-height: 0;
font-size: 0
}一切恢复作用啦。
方法二：父级div定义overflow：auto;
HTML:
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS：
.box {
border: 1px solid #ccc;
background: #fc9;
color: #fff;
margin: 50px auto;
padding: 50px;
overflow: auto;
zoom: 1; /*zoom: 1; 是在处理兼容性问题 */
}
方法三：在父级样式添加伪元素:after或者:before（推荐）
HTML:
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS:
.box {
border: 1px solid #ccc;
background: #fc9;
color: #fff;
margin: 50px auto;
padding: 50px;
}
.box:after{
content: '';
display: block;
clear: both;
}
结果：当然不用说啦