首页 > 代码库 > float/文档流/清除浮动

float/文档流/清除浮动

2024-09-09 11:30:34   234人阅读

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

float/文档流/清除浮动


联系
我们