清浮动方法小结

Posted 2020-10-04

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

       虽然  浮动 很好用，但是使用上还是存在一定的问题。最典型的问题就是一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度，子元素的浮动确定了他们的位置，但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为“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

}

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