清浮动方法小结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清浮动方法小结相关的知识,希望对你有一定的参考价值。

      通常我们创建一全页面的布局时,浮动是一种常用的方法,也是页面元素定位的一种基本功能。浮动可以让元素一个挨着一个。浮动可以创建一个自然流布局,同时充许元素设置自身尺寸和其父元素容器的尺寸大小。

       虽然  浮动 很好用,但是使用上还是存在一定的问题。最典型的问题就是一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度,子元素的浮动确定了他们的位置,但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷,从而使父元素的高度为“0”,以及忽略其他的属性。

 

    今天我们就来说说几种清浮动的方法:

1、html的方法:

    在容器的结束标签前添加一个空标签,在空标签上直接设置样式“clear:both”。<div style="clear:both"></div>

缺点:用这种方法来清除浮动,在大多数情况下是有效的,但这不太适合语义化。而且如果有很多浮动需要清除,这样就会造成页面上的空标签迅速堆积,而且在页面中没有上下文内容。

 

2、css的方法:

  1、使用“overflow”属性,在具有浮动元素的父容器中设置“overflow”的属性值为“hidden”,这样父容器就会有一个高度存在。

缺点:当你添加样式,或者将嵌套在里面的子元素移动到父容器的外面,或者你想给元素添加一个盒子阴影和制作一个下拉菜单。在下面的演示例子中,你可以看到元素的盒子阴影被切断在父元素之内。

 

 

  2、给父元素添加上  clearfix ::before  或  clearfix ::after  两个伪类。使用这些伪类,我们可以在浮动元素的父容器前面和后面创建隐藏元素。(推荐使用)

.clearfix::after {
content: ".";           //引号中间的空格一定要有,是指定添加的隐藏元素的内容为空的。
display: block;         // 指定隐藏元素的显示模式为块状

height: 0;         //为了该元素不占用空间

clear: both;            //清除左右浮动

visibility: hidden;          //隐藏添加的当前元素

*zoom:1;          //为了兼容ie6

}

    目前解决浮动最推荐的方式

以上是关于清浮动方法小结的主要内容,如果未能解决你的问题,请参考以下文章

清浮动的九种方式

ss清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

CSS清浮动

css 清浮动方法(总结8种方法)

清浮动的几种方式

Python-浮动 清浮动