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伪类 

posted on 2017-03-19 11:16  floated  阅读(345)  评论(0编辑  收藏  举报