解决CSS 设置clear:both没有效果

我们知道消除浮动可以使得父级盒子可以被动态扩充，但是今天遇到设置标签后无效果的情况。

先给大家贴代码：

<div class="box"><div class="damao">大毛</div><div class="ermao">二毛</div><div class="clear"></div></div>

我们设置好大毛和二毛的盒子以后添加空白标签这个空白标签的style添加以下内容

 .clear {clear: both;}

此时的效果图为：

但实际上有些人依然是

我通过检查二者的区别发现以下两点可能导致失败的原因

1.保证这个空白标签盒子是块级元素！！！

2.保证这个标签盒子是不设置宽度和高度的！！！！！（尤其注意可能存在的继承问题）

另外大家还是跟着老师的代码走，不然会出很多错误哈哈哈

解决CSS 设置clear:both没有效果相关推荐

如何用css设置文字的聚光灯效果
要用 CSS 设置文字的聚光灯效果,你可以使用 text-shadow 属性. 例如: .highlighted {text-shadow: 0 0 5px #ffff00; } 在这个例子中,我们为 ...
html怎么让图片变灰色,利用CSS设置图片黑白/灰色效果，同时适用于整站变灰
写页面的时候由于页面风格原因,可能需要图片变灰色,如果用图片处理软件的话可能会比较麻烦,而且会增加图片的数量,不利于资源的合理利用. 下面提供两种方法: 1.使用CSS的 filter: gray; ...
html 首字变大,CSS设置首字放大效果（代码实例）
本章给大家介绍CSS如何设置首字放大效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果. CSS中通过对第一个 ...
利用CSS设置页面的垂直居中效果
实现垂直居中关键的属性是text-align(文字的对其样式),line-align(垂直居中的高度),vertical-align(垂直居中) <!DOCTYPE html> <h ...
用css设置文字的描边效果
-webkit-text-fill-color: white;/*文字的填充色*/ -webkit-text-stroke: 2px black;/*描边的像素,也就是粗细,这里指定是2像素的黑色边框 ...
css设置边框内外发光效果
box-shadow: 0 0 10px rgb(0,153,184) inset,0 0 30px rgb(0,153,184);
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
css设置ie浏览器的样式,IE浏览器常见的9个css Bug以及解决办法
我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下 ...
html5盒子层级设置,解决CSS中子元素z-index与父元素兄弟节点的层级问题
1.问题的出现写了一个平铺的列表,其中有些列表项具有hover出现的弹出框.希望达成的目标是弹出框展现时,要把列表项内容遮盖住,以保证弹出框内容优先展示. 元素的结构大致如下: 列表项1 弹出框1 ...

解决CSS 设置clear:both没有效果

解决CSS 设置clear:both没有效果相关推荐

最新文章

热门文章