負外邊距margin對浮動元素的影響

antzone發表於2017-03-31

關於負外邊距的更多用法可以參閱css的負margin外邊距功能簡單介紹一章節。

下面就介紹一下負外邊距對浮動元素的影響，需要的朋友可以做一下參考。

負外邊距對浮動元素的影響和對於普通文件流元素的影響類似。

我們可以認為浮動元素在浮動流中，只不過這個流的方向可以向左也可以向右。

下面就通過程式碼例項演示一下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>無標題文件</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  float:left;
  margin-right:-50px;
}
.a{background:red}
.b{background:blue}
.c{background:green}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>

上面的程式碼設定每一個元素的margin-right為-50px，那麼元素的在浮動文件流中就會回退50px，所以就會出現右邊的元素會覆蓋前面元素的情況。再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>無標題文件</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
div{
  width:100px;
  height:100px;
  float:left;
  margin-left:-40px;
}
.a{background:red}
.b{background:blue}
.c{background:green}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>

在上面的程式碼中，外邊距的方向改成了反方向，浮動流的回退也是同樣的道理。

相關文章