25.清除浮动 & 瀑布流布局

文章预览

清除浮动 确保元素能够自我清除其子元素的浮动。 使用 ::after 伪元素并应用 content: '' 以允许其影响布局。 使用 clear: both 使元素同时清除左右浮动。 为了让这个技巧正常工作,确保容器中没有非浮动的子元素,并且在清除浮动的容器之前但在同一个格式化上下文中(例如浮动列)没有高度很高的浮动元素。 💬 注意:这只在你使用 float 来构建布局时有用。考虑使用更现代的方法,如 flexbox 或 grid 布局。 < div   class = "clearfix" >   < div   class = "floated" > 浮动 a div >   < div   class = "floated" > 浮动 b div >   < div   class = "floated" > 浮动 c div > div > .clearfix ::after  {   content :  '' ;   display : block;   clear : both; } .floated  {   float : left;   padding :  4px ; } 这个技巧解决了一个常见的 CSS 布局问题,即当元素只包含浮动子元素时,它的高度会塌陷为零。这会导致后续元素 ………………………………