清除浮动的小知识你知道吗

147 阅读1分钟

为什么要清除浮动? 如果子元素浮动了,此时子元素不能撑开标准流的块级父元素 那么怎么来清除浮动带来的影响呢? 1.直接给父元素设置高度 2.加额外的标签; 先在父元素内容的最后加一个块级元素然后给添加的块级元素设置clear:both 3.单伪元素清除法 相当于用伪元素代替了额外标签 基本写法: .clearfix::after{ content:''; display:block; clear:both; } 补充写法: .clearfix::after{ content: ''; display: block; clear: both; 补充代码:在网页中看不到伪元素 height: 0; visibility: hidden; } 项目中使用,直接给标签加类即可清除浮动 4.双伪元素清除法 .clearfix::before, .clearfix:after{ content:''; display: table; } .clearfix::after{ clear:: both; } 项目中使用,直接给标签加类即可清除浮动 5.给父元素设置overflow:hidden 直接给父元素设置 overflow:hidden