浮动的定义和特性理解

时间：2022-09-06 22:42:52

错误理解：

之前对浮动的理解是，只要添加了浮动，就尽量的往左上角靠拢。直到遇到了上一个浮动的元素，或者是没有空间了才重新一行开始。

正确理解：

CSS的浮动，更准确的说是水平浮动

元素的水平浮动，意味着元素只能左右浮动，而不能上下浮动

一个浮动的元素会尽量向左或向右移动，直到它的外边框遇到了包含框或另一个浮动的边框为止

浮动元素之后的元素将围绕它（此处指的是图像布局）

浮动元素之前的元素不受影响

eg:如果图像是右浮动，那么下面的文本流将环绕在它的左侧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动定义</title>
        <style type="text/css">
            img{
                float: right;
                margin: 8px;
            }
        </style>
    </head>
    <body>
          <p>
              <img src="img/3.jpg"/>
              如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
          </p>
    </body>
</html>

效果：

浮动的定义和特性理解

浮动特性：

1、块级元素浮动将并排显示，不再独占一行

2、内联样式浮动将支持设置宽高，不仅支持margin-left(right)，而且开始支持margin-top(bottom)

3、浮动元素默认内容撑开宽度

4、浮动元素脱离正常的文档流

5、浮动元素提升半层级

 

标签：

相关文章