初来CSDN,浅说去除浮动。

来源:互联网 发布:淘宝上的车秒贷怎么样 编辑:程序博客网 时间:2024/06/07 21:56

各位大佬们,作为一个资深了20多年的前端‘白纸’,今天学到了去除浮动的三个方法,特来此分享一番。请各位大佬忍住各种情绪。

左浮动float:left;右浮动float:right。所以在我刚接触浮动的时候第一个猜想到的是float:clear或者是remove(在我有限的英文单词词汇中想到的去除),果然有clear,不过是clear:both,所以第一种方法就是clear:both,但是这种方法需要我们在父元素中载增加一个元素,对这个元素进行定义clear:both;最终会使浮动去除。

第二种方法是对父元素进行定义overflow:hidden,在我最初解除之后,这是我是用最多的方法。在我不知道第三种方法的情况下好像是这个比较好用。

没错,现在就是第三种方法,在我学习第三种方法之前,我就已经在各大网站上看见了什么::before和::after,但是不懂,只感觉好厉害。不过今天我也学会了这个定义,是的,这个也是一种去除浮动的方法,我们先将父元素定义一个class名,如clearfix,在scss中写

.clearfix{*zoom:1;}

.clearfix:before,.clear:after{display:table;content:" "}

.clear:after{clear:both}

这种方法是添加一种伪元素,但是无需在父元素中添加元素,这种方法看上去逼格更高,更加方便使用。

原创粉丝点击