1、float:left|right|none|inherit
2、文档流是万张中显示排列时候所占的位置
3、浮动的定义:使元素脱离文档流。按照指定方向移动,遇到父级边界或者相邻的浮动元素停下来
4、clear:left|right|none|inherit;元素的某个方向上不能有浮动元素
cear:both;在左右两侧均不允许浮动元素
清楚浮动的方法:
<head> <meta charset="UTF-8"> <title>Document</title> <style> .img{width:100px;height:100px;background:red;float:left;} p{clear:left;} </style> </head> <body> <div class="img"></div> <p>您身边的课堂专家</p> </body> </html>
Float的特征
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层
接触float脱离文档流的,清除浮动的方法:
1、高度固定的情况下,加高度,给父级加同样的高度
2、父级浮动
3、父级inline-block
4、空标签清浮动,添加新标签,设置clear:both属性
5、添加标签<br clear="all">,可以清楚浮动
6、after伪类