Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexerciseullamcolaborisnisiutaliquipexEAcommodoconsequat。Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur。Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadesertmollitanimid./body>上面的代码是这样的：块级元素认为浮动元素不存在：红色块级元素不受粉红色浮动元素的影响，仍然显示在左上角，但是被粉色元素代替了部分覆盖左边的浮动元素会影响内联元素：文本部分会受到蓝色浮动元素的影响，还有一些蓝色浮动元素为空的浮动元素会间接影响包含块的布局：浮动元素会影响文本部分吗？使其多出一行，文字部分撑起最外层的边框框，因此间接影响了包含块的布局其中，浮动元素的放置会遵循以下规则：尽量高，尽可能高尽量靠左，尽量挨着不能超过包含块，除非元素比包含块宽不能超过行的最高点不能超过前面浮动元素的最高点ofit内联元素放置在浮动元素周围：左浮动元素的右侧和右浮动元素的左侧会出现浮动元素应用浮动元素并没有撑起包含块，这不是我们所期望的.包含块可以通过以下方法拉伸，称为封闭浮动方法：BFC：1)setoverflow:hiddenforthecontainingblockor2)setdisplay:table-cell/table/flex...BFCforthecontainingblock：块级格式化上下文。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的block-level元素如何布局，与这个区域的外部无关。只要满足以下条件：1）根元素2）float属性不是none3）position是absolute或fixed4）display是inline-block,table-cell,table-caption,flex,inline-flex5）overflow是不可见的对应的后台文件可以在：《BFC的神奇原理》伪元素：.clearfix::after{content:'';显示：块；明确：两者；}清除：两者；表示块级元素元素的左右不能有浮动。在包含块的末尾创建一个内容为空的伪元素，并设置clear:both使该元素位于所有浮动元素的后面，从而扩展了包含块的高度。包含块本身浮动的方法也是w3c使用的方法。但是，下一个元素将受此浮动元素的影响。为了解决这个问题，有些人选择让布局中的所有内容都浮动，然后用适当的有意义的元素（通常是站点的页脚）清理这些浮动。这有助于减少或消除不必要的标记。对应背景文件：《W3C CSS浮动》结束语以上就是谢老板视频的内容，希望对大家有所帮助。