清理浮動的三種經常使用方法以及如何居中一個浮動元素

時間 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>

就這。再接再礪~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。