原理: Html每一个标签前后都会存在前后节点::before、::after, 前后节点设置一个块状空元素来清空容器的浮动效果; 实现: <div class='clearfix'></div> //空 ...
今天偶然看到一个关于使用伪元素:before和:after清除浮动的问答,觉得很不错,特此记录一下。 原文出处:https: segmentfault.com q 先给出一个demo 由于父容器内有了浮动元素div的缘故,导致父容器的高度不能再自适应,因为浮动元素已经脱离了正常的文档流,现在我们添加上这个类.y clearfix。 父容器高度恢复正常,清除浮动成功,但是不要忘了还要加上一个clea ...
2019-08-14 09:53 0 1243 推荐指数:
原理: Html每一个标签前后都会存在前后节点::before、::after, 前后节点设置一个块状空元素来清空容器的浮动效果; 实现: <div class='clearfix'></div> //空 ...
利用伪元素:after清除浮动 让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面 ...
...
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 1) display:block 使生成的元素以块级元素显示,占满剩余 ...
使用方法: 优点: 代码更简洁 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。 代表网站: 小米、腾讯等 ...
/css"> /* 声明清除浮动的样式 */ .clearfix:after { content: " ...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双伪元素清除浮动</title> <style type="text/css ...
让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面。 所以我们在使用浮动进行布局的时候会需要一个块级元素(行内 ...