浮动元素 与 内联元素

    众所周知，浮动一开始的设计，是为了完成文字环绕的效果，后来却成了布局利器，正是这样，才使内联元素与其他元素不同，能够识别出浮动元素，让浮动和内联元素之间有了特殊的关系。

内联元素的环绕方式

浮动元素在内联元素之前

    

<div class="float">
    我是浮动元素![这里写图片描述](https://img-blog.csdn.net/20180607201143210?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RoZVBpbmtQYW50aGVy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
div>
<span>
    我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是皮我是内联元素我是内联元素我这内联元素我是内联元素我是内联元素我是内联元素我是内联元素一我是内联元素我是下内联元素我是内联元很我是内联元素开是内联元素我是内联元素我是内联元素我是内联元素我是内联心我是内联元素
span>

浮动元素在内联元素之后

    

<span>
    我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是内联元素我是皮我是内联元素我是内联元素我这内联元素我是内联元素我是内联元素我是内联元素我是内联元素一我是内联元素我是下内联元素我是内联元很我是内联元素开是内联元素我是内联元素我是内联元素我是内联元素我是内联心我是内联元素
span>
<div class="float">
    我是浮动元素
div>

内联元素按单词进行拆分

    为了防止同一个单词因文字环绕，而被拆开，浏览器解析时是按照单词解析的，如果包含快空间不足，也不会拆分。

    

    

内联元素 和 块级元素 与 浮动元素位置重叠

内联元素

    内联元素与浮动元素位置重叠时，背景和边框 都会在 浮动元素 上显示。

    

块级元素

    块级元素的 背景 和 边框 都会被 浮动元素 覆盖，但其内部的内联元素却不会被 浮动元素 所覆盖。

    

注：这里的 位置重叠 是指用 margin 使其位置发生重叠，而不是定位，定位可以触发 BFC 也能使其识别浮动元素。