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

时间 2019-11-10

标签清理浮动三种经常使用方法以及如何居中一个元素繁體版

原文原文链接

千里之行始于足下css

今天看到一个题目说如何居中一个float:left的元素的题目，我蛮觉得用margin:0 auto 就能够解决了。然而，试验以后，发现事实并不是如此，才发现本身对于这方面的知识竟是至关忙乱！因而撇下手头事务，翻书查资料温习了这部分‘简单’的内容。并总结以下。html

1、清理浮动的三种方法。浏览器

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

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

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

.clearfix{*zoom:1;}

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

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

因此综上，咱们优先考虑第三种方法，或者第二种，酌情使用~blog

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

对于一个没有浮动的元素，咱们一般能够经过对其设置 margin:0 auto; 来实现元素的居中，可是这个方法对于浮动元素却失去了做用，其实咱们能够理解的是，在脱离文档流后，浮动的力量其实就是auto的力量，因此他它会自动向左浮动。utf-8

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

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

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="utf-8" />
　　<title>元素居中问题</title>
<style type="text/css">
#main{
　　width: 70%;
　　background-color: #666;
　　overflow: hidden;
}
#div1{
　　width:30%;
　　height: 200px;
　　float: left;
　　background-color: blue;
　　margin-left:50%; 
　　position:relative; left:-15%;
}
</style>
</head>
<body>
<div id="main">
　　<div id="div1">
　　　　<p>居中吧！div！</p>
　　</div>
</div>
</body>
</html>

就这。再接再砺~