浮动的几点

下面是一些自己理解和网上摘录的：

浮动的元素会脱离normal流(文档流或标准流)。例子:

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <style type="text/css" >
            .parent {
                background: pink;
                width: 300px;
                height: 500px;
            }
            .div1 {
                background: red;
                width: 100px;
                height: 50px;
                float: left;
            }
            .div2 {
                background: yellow;
            }

        </style>
    </head>
    <body>
        浮动的元素会脱离normal流(文档流或标准流)。
        <br/>
        所以div2无法识别div1的位置，就出现在首位，结果div1会覆盖div2。
        <br/>
        如果div2长度少于div1长度，就完全被覆盖
        <br/>
        无论div2长度是多少，div2文字都会围绕div1
        <br/>
        <div class="parent">
            <div class="div1"></div>
            <div class="div2">
                我是div2的文字
            </div>

        </div>
    </body>
</html>

当添加一个浮动元素时：首先查看容器的当前行能否容得下这个元素，容不下就换行添加。注意：新浮动元素width>容器width，直接在新行添加，即使会超过容器width。
浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。(部分浏览器会采取增大容器高度以容下浮动元素，而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是：让容器也浮动)
浮动元素不会比容器的顶部还高
后一浮动元素的上界不会超过前一个浮动元素的下界（记住）
水平方向上，尽可能居左或居右

参考：

http://www.75team.com/archives/357?utm_source=rss&utm_medium=rss&utm_campaign=%25e5%25a4%25a7%25e8%25af%259dfloat

（介绍得比较详细）

相关阅读:
夜神模拟器连接电脑
Appium+python 多设备自动化测试
appium+python 连接手机设备的yaml配置文件
appium+python自动化测试连接设备
Ansible 学习目录
Python 时间处理
获取本机网卡ip地址
Ansible playbook 使用
ansible hosts配置
python os和sys模块使用

原文地址：https://www.cnblogs.com/dann/p/2733122.html