[郑州|结业弟子]JS-张雄|2019年12月04日的日报-技能树.IT修真院

发表于： 2019-12-04 21:50:51

1 1066

第一，今天学习收获：

1，通过w3cschoo官网，可知浮动设计初衷用来让文字段落来环绕图片，形成文字环绕效果。

2，对浮动的简单测试：（主要代码）

2.1，可以看到即使原本包含两个子元素的父div块，变成只有文本字体来撑开容器。

<style>
        
        .father {
            background-color: grey;
        }
        .child1 {
            background-color: indianred;
            float: left;
            width: 100px;
            height: 100px;
        }
        .child2 {
            background-color: indigo;
            float: left;
            width: 200px;
            height: 200px;
        }
    </style>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="father">
        用于包裹的父元素
        <div class="child1">child1 左浮动</div>    
        <div class="child2">child2 右浮动</div>
    </div>
</body>

2.2，只让child1浮动，

<style>
        
        .father {
            background-color: grey;
            color: ivory;
        }
        .child1 {
            background-color: indianred;
            float: left;
            width: 100px;
            height: 100px;
        }
        .child2 {
            background-color: indigo;
            width: 200px;
            height: 200px;
        }
    </style>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="father">
        用于包裹的父元素（我的文本也被挤出了）
        <div class="child1">child1 左浮动</div>    
        <div class="child2">child2 我的文本被挤到child1之外了</div>
    </div>
</body>

可以看到虽然child1的内容可以被优先显示，但是却让其他处于正常文档流的元素内容被挤到了设置浮动元素之外的位置，（原因是即使浮动脱离了文档<似乎各有解释？请师兄解惑>，但其所占位置依旧存在）,其中有个比喻说的是虽然篮球场上的植物人（浮动元素）并不能对你产生太大的影响，但起码你不能直接穿过他，必须还是得绕道。这还有更加有趣详细的解释：

http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

2.3 因为浮动的特性，会对其他非浮动元素造成影响，因此也有了清除浮动所带来的问题的途径：

https://blog.csdn.net/baidu_37107022/article/details/71557806