【專欄試讀】(10)讓「盒子」動起來:① 浮動 | CSS

2021-03-05 前端一萬小時

前言：前 10 篇文章，我們基本上都是在用「理論」學習「理論」。從這篇開始，我們試著用「實踐」來學習理論，然後又用於實踐。

一個原則：把代碼拷貝到 JS Bin 上，對照效果搞懂每行代碼「是什麼」、「為什麼」、「怎麼樣」？

1 為什麼需要「浮動」

假設我們需要有個東西，然後它的排版不是依照盒模型的定義——從上往下依次排列，而是從左到右這種結構，那麼我們需要考慮到使用「浮動」。

例如一個網站的頭部，一部分在左邊，一部分在右邊。首先，「部分」的表示我們會用 div，而 div 是塊級元素，按理說它會從上到下，佔據一整行，不可能整列排列。那這個時候我們就需要「浮動」。

2 「浮動」是怎麼用的，有什麼表現效果2.1 放不下會換行

一個「浮動盒」會向左或向右移動，直到其外邊（outer edge）挨到包含塊邊沿或者另一個浮動盒的外邊。如果沒有足夠的水平空間來浮動，它會向下移動，直到空間合適或者不會再出現其他浮動了。

🔗源碼及效果展示
https://jsbin.com/xixikovapi/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一萬小時</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">①</div>
    <div class="box box2">②</div>
    <div class="box box3">③</div>
  </div>
</body>
</html>

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid black;
}
.box {
  float: left; /* 🚀直接在你需要浮動的元素上加 float 屬性。 */
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}

.box1 {
  background: blue;
}
.box2 {
  background: pink;
}

🆚對比：
🔗源碼及效果展示
https://jsbin.com/fesesoreyo/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">①</div>
    <div class="box box2">②</div>
    <div class="box box3">③</div>
  </div>
</body>
</html>

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid;
}
.box {
  float: right;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
/* 🚀站在瀏覽器的角度看，它會挨著順序依次渲染。 */

.box1 {
  background: blue;
}
.box2 {
  background: pink;
}

2.2 被卡住的情況🔗源碼及效果展示
https://jsbin.com/tapidetiyi/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">①</div>
    <div class="box box2">②</div>
    <div class="box box3">③</div>
  </div>
</body>
</html>

.ct {
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}
.box {
  color: #fff;
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1 {
  background: blue;
  height: 120px;
}
.box2 {
  background: pink;
}

/*
依然站在瀏覽器的角度，從上往下渲染文檔。
當依次渲染完 1、2 後，渲染 3 的時候，右邊放不下，
然後它要被擠下去，擠下去後它貼著 2 的下邊緣開始向左移動。
當移動碰到 1 右下角時，動不了了，1 被卡住了。
所以我們在設置高度不一樣時，會出現一個「卡住」的問題。
 */

2.3 當浮動元素與文本有交集的時候🔗源碼及效果展示
https://jsbin.com/pacuvusoja/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">①</div>
    <p>
      挨到包含塊邊沿或者另一個浮動盒的外邊。
      如果存在行盒，浮動盒的外 top（邊）會與當前行盒的 top（邊）對齊。
      如果沒有足夠的水平空間來浮動，它會向下移動，
      直到空間合適或者不會再出現其他浮動了。
    </p>
    <div class="box box2">②</div>
    <div class="box box3">③</div>
  </div>
</body>
</html>

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid black;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
.box1 {
  width: 140px;
  height: 120px;
  background: blue;
}
.box2 {
  background: pink;
}

🏆可以得到：
普通流中的一個元素，如果沒有設置定位和浮動，那它和浮動元素在一起之後，它會被浮動元素所遮擋。

💡進一步驗證：
🔗源碼及效果展示
https://jsbin.com/yijajakaxo/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">①</div>
    <p>
      挨到包含塊邊沿或者另一個浮動盒的外邊。
      如果存在行盒，浮動盒的外 top（邊）會與當前行盒的 top（邊）對齊。
      如果沒有足夠的水平空間來浮動，它會向下移動，
      直到空間合適或者不會再出現其他浮動了。
    </p>
    <div class="box box2">②</div>
    <div class="box box3">③</div>
  </div>
</body>
</html>

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
.box1 {
  width: 140px;
  height: 120px;
  background: blue;
  opacity: 0.5; /* 🚀設置透明度來觀察！ */
}
.box2 {
  background: pink;
}

/*
🚀但裡邊的文字並沒有被這個浮動元素所遮擋，那它呈現的這個效果是：
這個段落 p 是看不到這個浮動元素的，而文字看得到，並且圍繞這個浮動元素排列。
 */
/*
🚀即展現出來的一個規則就是：
當一個普通元素碰到一個浮動元素後，這個普通元素看不見這個浮動元素，
但普通元素裡邊的文字看得見這個浮動元素。
 */

2.4 浮動元素脫離了普通流

脫離普通流是指：它的父容器在去計算寬高的時候，發現不了浮動元素。即，父容器不會被裡面的浮動元素撐開；

❗️注意：和 absolute 不一樣。
🔗源碼及效果展示
https://jsbin.com/kuqejusoto/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一萬小時</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">①</div>
    <div class="box box2">② 塊盒看不見浮動的 box1，但我是文本我能看見！</div>
    <div class="box box3">③</div>
  </div>
</body>
</html>

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
.box1 {
  float: left;
  background: blue;
  opacity: 0.6;
}
.box2 {
  width: 110px;
  height: 110px;
  background: pink;
}

2.5 塊級元素浮動寬度收縮，行內元素浮動以塊級特性去呈現🔗源碼及效果展示
https://jsbin.com/sotonifaqu/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">這是 div</div>
  <span>這是 span</span>
</body>
</html>

.box {
  float: left;
  color: #fff;
  background: red;
}
span {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  color: #fff;
  background: blue;
} 

/* 🚀塊級元素設置浮動之後，它就呈現出 inline-block 這種感覺，它的寬度會收縮。 */
/*
🚀行內元素設置為浮動之後，它就呈現了塊級的特性，也有 inline-block 的感覺，
就把行內元素變成可以設置寬高、margin 等，但沒有居中這些東西。
 */

3 「浮動」的使用場景3.1 兩欄布局（左側固定寬度，右側自適應；右側固定寬度，左側自適應）🔗源碼及效果展示——左側固定寬度，右側自適應
https://jsbin.com/hamakucaye/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="aside">側邊欄固定寬度</div>
  <div class="main">內容區塊自適應寬度</div>
</body>
</html>

.aside {
  float: left;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}
.main {
  height: 500px;
  margin-left: 160px; /* 🚀表示左邊的這 160px 的範圍我不用了！ */
  color: #fff;
  background: blue;
}

🆚對比（右側固定寬度，左側自適應）：
🔗源碼及效果展示
https://jsbin.com/cafohunara/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一萬小時</title>
</head>
<body>
  <div class="aside">側邊欄固定寬度</div>
  <div class="main">內容區塊自適應寬度</div>
</body>
</html>

.aside {
  float: right;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}
.main {
  margin-right: 160px;
  /* 🚀表示右邊的這 160px 的範圍我不用了！ */

  height: 500px;
  color: #fff;
  background: blue;
}

3.2 三欄布局——兩側寬度固定，中間自適應（注意 HTML 中的 menu aside main 的順序！）🔗源碼及效果展示
https://jsbin.com/vusaxoyiwi/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一萬小時</title>
</head>
<body>
  <div class="menu">側邊欄固定寬度</div>
  <div class="aside">側邊欄固定寬度</div>
  <div class="main">內容區塊自適應寬度</div>
</body>
</html>

.menu {
  float: left;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}
.aside { 
  float: right;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}
.main {
  height: 500px;
  margin-right: 160px;
  margin-left: 160px;
  /* 🚀加左右 margin 就把位置撐開了！ */

  color: #fff;
  background: blue;
}

❗️如果 HTML 中的 menu aside main 的順序變了：
🔗源碼及效果展示
https://jsbin.com/rowemavuwe/edit?html,css,output

HTML

<div class="menu">側邊欄固定寬度</div>
<div class="main">內容區塊自適應寬度</div>
<div class="aside">側邊欄固定寬度</div>

<!-- 順序一旦變了，後邊的 aside 就會跳行，跑到下邊去了。
原因：假設我是瀏覽器，我需要對著 HTML 來畫出對應的圖像。
首先畫 menu，結合其樣式，左浮；
但這裡我們遇到了 main，main 是一個塊級元素，它會佔據一整行的寬度；
那接下來的 aside 就只有在 main 的基礎上往右下流動。 -->

.menu {
  float: left;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}
.aside { 
  float: right;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}

.main {
  height: 500px;
  margin-right: 160px;
  margin-left: 160px;
  /* 加左右 margin 就把位置撐開了！ */

  color: #fff;
  background: blue;
}

3.3 利用浮動實現「導航條」3.3.1 「導航條」靠左🔗源碼及效果展示
https://jsbin.com/nofezuxidu/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">① 首頁</a></li>
    <li><a href="#">② 產品</a></li>
    <li><a href="#">③ 服務</a></li>
    <li><a href="#">④ 關於</a></li>
  </ul>
</body>
</html>

.navbar {
  list-style: none;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

/*
🚀當然我們用 inline-block 也可以實現效果，但不同方式需要注意的問題不一樣：
使用浮動我們需要注意撐開容器；而用 inline-block，我們需要注意它的縫隙。
 */

3.3.2 「導航條」靠右🔗源碼及效果展示
https://jsbin.com/feyaposiko/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一萬小時</title>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">① 首頁</a></li>
    <li><a href="#">② 產品</a></li>
    <li><a href="#">③ 服務</a></li>
    <li><a href="#">④ 關於</a></li>
  </ul>
</body>
</html>

.navbar {
  float: right;
  /* 🚀把 ul 整體進行右浮動。 */

  list-style: none;
}
.navbar>li {
  float: left;
  /* 🚀但 ul 裡邊的東西都是靠左的。 */

  margin-left: 15px;
}

🆚對比：
🔗源碼及效果展示
https://jsbin.com/vevoyevoha/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一萬小時</title>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">① 首頁</a></li>
    <li><a href="#">② 產品</a></li>
    <li><a href="#">③ 服務</a></li>
    <li><a href="#">④ 關於</a></li>
  </ul>
</body>
</html>

.navbar {
  list-style: none;
}
.navbar>li {
  float: right;
  /* 🚀直接改這裡是不行的，因為站在瀏覽器的立場是按文檔順序來渲染的。 */

  margin-left: 15px;
}

4 清除「浮動」4.1 為什麼要清除浮動

因為任何東西有利有弊。

4.1.1 第一，浮動對後續元素位置產生影響（渲染時，因為塊元素看不見，但裡邊的文字看的見）🔗源碼及效果展示
https://jsbin.com/hifubizayu/edit?html,css,output

HTML

<div id="content">
  <div class="menu">側邊欄固定寬度</div>
  <div class="aside">側邊欄固定寬度</div>
  <div class="main">內容區塊自適應寬度</div>
</div>
<div id="footer">我是 footer，但我的樣式出現了問題！</div>

.menu {
  float: left;
  width: 150px;
  height: 300px;
  color: #fff;
  background: red;
}
.aside { 
  float: right;
  width: 150px;
  height: 300px;
  color: #fff;
  background: red;
}
.main {
  height: 200px;
  margin-right: 160px;
  margin-left: 160px;
  color: #fff;
  background: blue;
}
#footer {
  color: #fff;
  background: grey;
}

4.1.2 第二，父容器高度計算出現問題
🔗源碼及效果展示
https://jsbin.com/guqobomewe/edit?html,css,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一萬小時</title>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">① 首頁</a></li>
    <li><a href="#">② 產品</a></li>
    <li><a href="#">③ 服務</a></li>
    <li><a href="#">④ 關於</a></li>
  </ul>
</body>
</html>

.navbar {
  list-style: none;
  border: 1px solid #ccc;
  /*
  加一個背景色也沒效果：
  background: pink;
   */
}
.navbar>li {
  float: left;
  margin-left: 15px;
}


/*
🚀由於浮動元素脫離了文檔流，所以它的父元素是看不見他的。
這裡對於 navbar 來說，它認為裡邊沒有什麼 li 來把它撐開。
因為 li 已經浮動了，那沒有東西撐開它，它就會認為高度為 0。
 */

4.2 清除浮動的方法4.2.1 清除浮動實現的原理和方法

🔗源碼及效果展示
https://jsbin.com/behomudiji/edit?html,css,output

<ul class="navbar">
  <li><a href="#">① 首頁</a></li>
  <li><a href="#">② 產品</a></li>
  <li><a href="#">③ 服務</a></li>
  <li><a href="#">④ 關於</a></li>

  <li class="clear"></li>
  <!-- 🚀想解決這個沒辦法撐開的問題，那麼就要求這個源文檔中要有一個沒有被浮動的的元素——普通元素。--> 

</ul>

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.navbar .clear {
  float: none;
  clear: left;
}
/* 🚀通過清除浮動來獲得一個普通元素，進而撐開這個父容器。 */

清除浮動 clear: left; ——這個 clear 可以用在任何元素上，不管你是不是浮動元素。要求該盒的 top、border 邊位於源文檔（就是 HTML 文檔結構中）中在此之前的元素形成的所有左浮動盒的 bottom 外邊下方（如果沒有左浮動盒，那你清除左浮動也就沒有意義）。

清除浮動 clear: right; ——要求該盒的 top border 邊位於源文檔中在此之前的元素形成的所有右浮動盒的 bottom 外邊下方。

清除浮動 clear: both; ——只要源文檔中該盒前邊有浮動元素，那麼就在這個浮動元素下方。

1. 🆚對比

我們上邊是用一個 li 來實體化普通元素，那我們可否有更簡化的方法——偽元素（偽元素的一個作用就是去代替標籤）。

🔗源碼及效果展示
https://jsbin.com/quhuzureqa/edit?html,css,output

HTML

<ul class="navbar">
  <li><a href="#">① 首頁</a></li>
  <li><a href="#">② 產品</a></li>
  <li><a href="#">③ 服務</a></li>
  <li><a href="#">④ 關於</a></li>
</ul>

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.navbar::after {
  content: "";
  /* 🚀寫了一個元素，你必須要有 content。 */

  display: block;
  /*
  🚀注意這裡如果沒有這個 block，是不會生效的，因為寫了 after，只是表示是一個匿名的行盒，
  即一個字符串。然而它必須是塊級元素，它才會下去。
   */

  clear: both;
}
/*
🚀用偽元素這樣寫就是表示：
我在源文檔 navbar 的最後生成了一個 block 元素，然後清除浮動，它就會位於浮動盒子的下方，
進而撐開了 navbar 這個父容器。
 */

2. 🆚再對比🔗源碼及效果展示
https://jsbin.com/cicowelebo/edit?html,css,output

為了通用性，我們常常 .clearfix::after; ——就是為了修復浮動所產生的問題。

HTML

<ul class="navbar clearfix">
<!-- 🚀凡是需要清除浮動的地方我們都可以加一個這個樣式就可以通用！ -->

  <li><a href="#">① 首頁</a></li>
  <li><a href="#">② 產品</a></li>
  <li><a href="#">③ 服務</a></li>
  <li><a href="#">④ 關於</a></li>
</ul>

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.clearfix::after {
  /*
  🚀為了通用性，我們直接 clearfix。然後在 HTML 文檔中，
  哪裡需要清除浮動，就直接加一個這個類名進去就可以了。
   */

  content: "";
  display: block;
  clear: both;
}

4.2.2 解決上邊由「浮動」帶來的問題🔗源碼及效果展示
https://jsbin.com/tayicumolu/edit?html,css,output

HTML

<div id="content" class="clearfix">
<!-- 🚀意思就是：這三個元素下邊還有一個元素，然後這個元素會在這三個元素的下方，
進而就會撐開這個 content。 -->

  <div class="menu">側邊欄固定寬度</div>
  <div class="aside">側邊欄固定寬度</div>
  <div class="main">內容區塊自適應寬度</div>
</div>
<div id="footer">我是 footer，但我的樣式出現了問題！</div>

.menu {
  float: left;
  width: 150px;
  height: 300px;
  color: #fff;
  background: red;
}
.aside { 
  float: right;
  width: 150px;
  height: 300px;
  color: #fff;
  background: red;
}
.main {
  height: 200px;
  margin-right: 160px;
  margin-left: 160px;
  color: #fff;
  background: blue;
}
#footer {
  color: #fff;
  background: grey;
}


.clearfix::after {
  /*
  🚀為了通用性，我們直接 clearfix，然後在 HTML 文檔中，哪裡需要清除浮動，
  就直接加一個這個類名進去就可以了。
   */

  content: "";
  display: block;
  clear: both;
}

🏆小總結：
所以以後我們想去實現一個水平布局，就有了兩種方法：

5 浮動和負 margin

兩個浮動元素，如果因放不下導致其中一個下移，對下移的元素設置負 margin 值大於自身的寬度可將其上移。

🔗源碼及效果展示
https://jsbin.com/divuquneko/edit?html,css,output

HTML

<div class="container">
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
</div>

* {
  margin: 0
}
.container {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.box1 {
  float: left;
  width: 300px;
  height: 100px;
  background: pink;
}
.box2 {
  float: left;
  width: 110px;
  height: 100px;
  margin-left: -10px;  
  /* 🚀瀏覽器計算的時候就相當於寬度減去這個 10，然後就是 100，那就正好放上去。 */

  background-color: red;
}

相關焦點

  • 【專欄試讀】(07)CSS 基本視覺格式化:① 「塊盒子」格式化 | CSS
    每個盒子的「布局」由以下因素決定（本篇文章和下一篇文章主要講解第 ①、② 點，其屬於「最基本的視覺格式化」，而對於剩下的要點，我們在接下來的系列文章中會挨個討論）：① 盒子的尺寸：精確指定、由約束條件指定或沒有指定；② 盒子的類型：行內盒子（inline box）、行內級盒子（inline-level box）、原子行內級盒子（atomic
  • CSS的盒子模型和浮動,都在這了
    點關注，不迷路，每天分享大量前端知識css中的盒子模型 css處理網頁時，他認為每個元素都包含在一個不可見的矩形盒子 盒子是由 內容區，內邊距(padding)，邊框，外邊距(margin)組成在瀏覽器中，其默認樣式中存在一些body等元素存在的默認樣式，比如一些外邊距
  • 一文了解CSS clear both清除浮動
    一、前言CSS clear both清除產生浮動 ,使用了css float浮動會產生css浮動,這個時候就需要清理清除浮動,就用clear樣式屬性即可實現。案例說明設置一個css寬度(css width)為500px;  盒子(div   ),css邊框(css border)為紅色,css背景(css background)為黑色、css padding為10px盒子,裡面包裹著2個小盒子,一個css 浮動靠右(float:right)、一個css float靠左(float:left),兩者邊框為白色,背景顏色為灰色
  • 一篇文章帶你了解CSS clear both清除浮動
    ，使用了css float浮動會產生css浮動，這個時候就需要清理清除浮動，就用clear樣式屬性即可實現。案例說明設置一個css寬度（css width）為500px;  盒子(div   )，css邊框（css border）為紅色，css背景（css background）為黑色、css padding為10px盒子，裡面包裹著2個小盒子，一個css 浮動靠右（float:right）、一個css float靠左（float:left）
  • CSS浮動屬性Float詳解
    CSS浮動屬性Float詳解什麼是CSS Float？float 是 css 的定位屬性。在傳統的印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為「文本環繞」。在網頁設計中，應用了CSS的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的圖片一樣。
  • HTML+CSS:css清除浮動的幾種方式,哪種最合適?
    上篇文章我們說了元素的浮動，本篇文章主要介紹下css浮動帶來的影響，以及如何清除浮動。細心的人可能發現了，在我們上篇文章寫的導航條中存在一個問題，那就是使用了float之後，父級盒子的高度變為0了。我們來寫一個例子來看一下，創建一個父級div，並設置border屬性，然後下邊創建兩個子元素span，並設置浮動。具體代碼如下所示：由上圖可以看出，在給span添加了float之後，父級元素div的高度就變成了0。
  • CSS清除浮動的幾種方法
    來源 | https://www.html.cn/web/css/19613
  • CSS:浮動(float)
    前面我們說過，網頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？ CSS的定位機制有3種：普通流（標準流）、浮動和定位。html語言當中另外一個相當重要的概念----------標準流！或者普通流。
  • CSS浮動和浮動清理講解
    >&lt;div&gt;&lt;div&gt;xxxx&lt;/div&gt;&lt;div&gt;yyyyy&lt;/div&gt; &lt;p&gt;&lt;/p&gt;&lt;/div&gt; 注意上面的代碼中，加紅的代碼中類clear的css
  • 前端基礎篇之CSS世界
    如下圖右側的table和左側的文字在一行排列（外在盒子inline的表現特徵），同時有擁有自定義寬度111px（內在盒子table可以設置寬高）。css權重和超越`!內聯盒模型是指內聯元素包含的幾個盒子，理解記憶下面的幾個概念對css的深入學習極其重要。內容區域：本質上是字符盒子。在瀏覽器中，文字選中狀態的背景色就是內容區域。內聯盒子：內聯盒子就是指元素的外在盒子是內聯的，會和其他內聯盒子排成一行。行框盒子：由內聯元素組成的每一行都是一個行框盒子。行框盒子由一個個內聯盒子組成，如果換行，那就是兩個行框盒子。
  • CSS面試須知,哪些需要掌握得CSS技巧
    1 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？用來控制元素的盒子模型的解析模式，默認為content-boxcontext-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬border-box：IE傳統盒子模型。
  • CSS 布局經典問題初步整理
    10個文檔學布局：通過十個例子講解布局，主要涉及相對布局，絕對布局，浮動。聖杯布局聖杯：父盒子包含三個子盒子（左，中，右）中間盒子的寬度設置為 width: 100%; 獨佔一行；使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；父盒子設置左右的 padding 來為左右盒子留位置；對左右盒子使用相對布局來佔據 padding
  • CSS教程之超級快速入門教程
    ">CSS樣式</style>;注意：代碼可維護性比較差，沒有實現CSS代碼與HTML結構分離，影響範圍只在當前頁面;外聯引入：在網頁外創建一個xx.css文件，網頁頭部中利用<link rel="stylesheet" type="text/css" href="xx.css">;
  • CSS學習筆記總結
    CSS(層疊樣式)由網景公司在1996年發布,取代了html 專門用來渲染頁面的樣式,文件以.css結尾 嚴重區分大小寫 毫無容錯性css的第一個宗旨是將頁面的結構和樣式解耦引入css的三種方式內嵌式以上元素都是塊元素 塊元素自帶換行 一行只能書寫一個 設置對齊方式有效 設置盒子模型有效2)內聯元素(inline)eg:label span a img*內元素沒有換行 一行可以存在多個 從左向右排列 設置對齊方式和盒子模型等參數一律無效
  • 面試整理(三)CSS部分
    ， display 根據下表進⾏調整否則，d- 如果元素是根元素， display 根據下表進⾏調整e- 其他情況下 display 的值為指定值f- 總結起來：絕對定位、浮動、根元素都需要調整 display
  • HTML CSS整理筆記
    ： (1)行內樣式：直接在標籤中用style屬性設置CSS 如<p style="font-size:10px;">字體大小</p> (2)內部樣式表：把css寫在head的<style>中，規範化應為<style type="text/css"> (3)外部樣式表：文件擴展名為.css，在外部樣式表中不需要&
  • 面試必備 css面試必考點
    1 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？用來控制元素的盒子模型的解析模式，默認為content-boxcontext-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬border-box：IE傳統盒子模型。
  • 10個關於css高頻面試題
    在IE下, Layout,可通過zoom:1 觸發浮動的元素會被父級計算高度(父級元素觸發了BFC)非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)margin不會傳遞給父級(父級觸發BFC)屬於同一個BFC的兩個相鄰元素上下margin會重疊普通文檔流布局: 浮動的元素是不會被父級計算高度非浮動元素會覆蓋浮動元素的位置
  • 掌握CSS定位,才能讓「盒子」飛得更高更遠更穩
    眾所周知，前端CSS中，盒模型、浮動、定位為必須掌握的三座大山。今天就來聊聊定位的那些事。定位是什麼？先來看看哪些場景用到定位，如下圖所示，凡是有盒子壓住另一個盒子的地方都可定位，因為用浮動做不了，如果盒子浮動，會並排但不會出現有層級的觀感。所以想要有層級的觀感，就得用定位。
  • 【專欄試讀】(04)CSS 值和單位 | CSS
    🔥🔥🔥「前端一萬小時」兩大明星專欄限時折扣中，點擊下方公眾號詳細了解：