float/文档流/清除浮动

Posted 2020-09-05 floated

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了float/文档流/清除浮动相关的知识，希望对你有一定的参考价值。

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>