Float浮动
特性:脱离文档流,会沿着父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
产生浮动的原因
一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。
情况如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{ width:300px; border:1px solid green; }
#box2{ width:100px; height:100px; background:red; float:left;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
截图如:
本来红色对象盒子是在绿框盒子内,但对红色盒子使用了float浮动,导致绿框盒子不能撑开,这样浮动就产生了。
清除浮动原因
由于浮动产生,对周围的元素布局造成影响,浮动的元素也不能撑开父亲。
清除浮动方法
1. 解决上下排列的情况:
利用clear属性清除float浮动: clear : left /right / both(比较常用左右浮动都清除)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{ width:100px; height: 100px; background:red; float:left;}
#box2{ width:100px; height: 100px; background:blue;clear: left;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
2.解决嵌套的情况
方法一:对父级设置适合CSS高度 :
给浮动的元素的父元素加上高度,清除浮动。但一般不推荐 , 不适合做自适应的效果,父元素高度由儿子撑开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{ width:300px; height:300px;background: blue;}
#box2{ width:100px; height:100px; background:red; float:left;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
方法二:父元素浮动 :
给父元素加浮动,也不不推荐 , 因为父容器浮动也会影响到后面的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{ width:300px; background: blue;float:left;}
#box2{ width:100px; height:100px; background:red; float:left;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
方法三: overflow : hidden 触发BFC规范 ,实现清除浮动效果
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{ width:300px; background: blue; overflow: hidden;}
#box2{ width:100px; height:100px; background:red; float:left;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
方法四: after伪类 == 推荐==
注意:clear:both这个属性只能加给块标签,而after伪类添加内容默认是内联元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{ width:300px; background: blue; }
#box2{ width:100px; height:100px; background:red; float:left;}
.clear:after{ content:""; display: block; clear:both;}
</style>
</head>
<body>
<div id="box1"class="clear">
<div id="box2"></div>
</div>
</body>
</html>
------ by逆战班同学整理