首先从一个问题说起
问题描述如下，两个绿块是两个浮动元素，并被包含在黄色块中，蓝色块是在黄色块下面的，并将蓝色块设置marginTop为-40px，"hello world"文字是包含在蓝色块中的。
html结构如下
<ul class="ul-1 clf">
<li></li>
<li></li>
</ul>
<a href="" class="a-1">hello world</a>
问题说明
看到有这种效果，想到是不是ul(黄色快)的浮动没有清理，但是确认已经通过伪元素:after清理过了；百思不得其解，然后换用overflow清除浮动，发现效果正常了；因此认为overflow和伪元素:after清除浮动的机制和原理是有区别的。
首先从一个问题说起 问题描述如下，两个绿块是两个浮动元素，并被包含在黄色块中，蓝色块是在黄色块下面的，并将蓝色块设...
刚学习了浮动，这里整理一下清除浮动的方法。 一、伪元素 伪元素清除浮动是伪元素的用途之一，这是清除浮动的一个相对比...
清除浮动： 1.使用before和after双伪元素清除浮动 优点：代码更简洁 缺点：用zoom:1触发hasL...
使用伪元素:after清除浮动 .parent {padding: 10px;background: red;}....
css清除浮动的四种方法 额外标签法 w3c推荐用法 overflow 最简单 给父元素添加 ： ：after伪元...
清除浮动 添加新的元素clear： both 父级div定义 overflow：auto 伪类 clear：aft...
1.给父级元素添加clearfix名，使用after伪类清除浮动 2.在浮动元素后添加一个元素 3.给浮动元素父级...
通过after伪类，选中box1的后面可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动.c...
通过after伪类，选中box1的后面可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动.c...
使用双伪元素清除浮动 1、父级div定义伪类：after和zoom 原理：IE8以上和非IE浏览器才支持:afte...
本文标题：overflow和伪元素:after清除浮动对比
本文链接：https://www.haomeiwen.com/subject/syejoftx.html
网友评论