清理浮动的三种常用方法以及如何居中一个浮动元素

Posted 2021-01-27 为更好

当给元素设置了float属性之后，我们知道，元素便会脱离文档流的束缚，像一片水中浮动的树叶随波逐流。但是，在浮动的情况下，可能会导致网页内容出现一些我们并不想让其发生的干扰，例如其父元素的包裹作用将失去作用，假如你给父元素设置了漂亮的背景它却不见了，岂不惹人烦恼！于是，清理浮动属性带来的干扰就十分重要了。我们常常有三种方法。

方法一：在浮动元素后面添加一个标签（例如<br/>），并给此标签设置clear:both; 样式。但是其缺点是会增加多于的无用的不必要标记。今天在Stack Overflow上看到一个更简单的设置方式，我们可以增加以下样式：

 

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}只是这种方法不支持IE6、7.注意，clearfix是插入到要清理浮动塌陷的父元素包裹层的类名。对于IE7以下的浏览器，我们可以这样解决：

.clearfix{*zoom:1;}

方法二：给其父元素设置浮动属性，这样会使其父元素也拥有了这项技能，也就不会影响了~但是这种做法可能会导致其它不需要浮动子元素也受到其浮动的影响。

方法三：给其父元素设置 overflow:hidden; 样式，也能达到我们需要的效果。其原理很简单，因为overflow属性定义在包含的内容对于指定的尺寸太大的情况下元素应该如何反应，当其hidden的时候父元素的边框就会紧贴着子元素。So,达到了我们需要的效果。但是其会在某些情况下产生滚动条或者截断内容，当然这种情况我们大可以谨慎操作避免的。

所以综上，我们优先考虑第三种方法，或者第二种，酌情使用~

二、如何居中一个设置了float:left的元素

对于一个没有浮动的元素，我们通常可以通过对其设置 margin:0 auto; 来实现元素的居中，但是这个方法对于浮动元素却失去了作用，其实我们可以理解的是，在脱离文档流后，浮动的力量其实就是auto的力量，所以他它会自动向左浮动。

那么，此情此景，应该怎么样来实现居中的效果呢？仔细考虑，会有这样一个方法。

首先给此元素设置一个宽度值，先设置它的 margin-left:50% ，这个时候元素的左边缘正好位于其父元素的中央，然后设置其position:relative;left:负本元素宽度的一半，这样的目的是将本元素向左移动其宽度的一半，这个时候可保证本元素的中间点位于父元素的中央。