子元素浮動對父元素的影響

阿新 • • 發佈：2021-01-11

技術標籤：css css html

目錄

前言

我們都知道子元素浮動會導致父元素高度坍塌，子元素和父元素都浮動的話，父元素還會出現高度坍塌的情況嗎？

1.父元素不浮動時

首先我們設定三個盒子a、b、c,分別為爺爺元素、父元素、子元素。c浮動，a、b不浮動。
程式碼：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .a {
          width: 300px;
          background-color: 
 pink;
      }
      .b {
        width: 200px;
        background-color: blue;
      }
      .c {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="a ">
      <div class 
="b">
        <div class="c"></div>
      </div>
    </div>
  </body>
</html>

顯示結果：
在這裡插入圖片描述
可以看出，對子元素c設定浮動後，父元素b高度沒有被撐起來。

爺爺元素的高度由父元素的高度決定，因此同樣也為0。

2.父元素也浮動時

子元素c和父元素b都浮動
程式碼：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .a 
 {
        width: 300px;
        background-color: pink;
      }
      .b {
        width: 200px;
        background-color: blue;
        float: left;
      }
      .c {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="a ">
      <div class="b">
        <div class="c"></div>
      </div>
    </div>
  </body>
</html>

顯示結果：
在這裡插入圖片描述
可見，當子元素浮動，父元素若是也浮動，那麼父元素的高度就不會坍塌。

3.小結

子元素浮動，若父元素不浮動，那麼父元素的高度就會坍塌；若父元素也浮動，那麼父元素的高度就不會坍塌。

子元素浮動對父元素的影響

技術標籤：csscsshtml 目錄前言1.父元素不浮動時2.父元素也浮動時3.小結前言我們都知道子元素浮動會導致父元素高度坍塌，子元素和父元素都浮動的話，父元素還會出現高度坍塌的情況嗎？

設定flex屬性時子元素寬度超出父元素

設定右邊元素flex：1，當右邊元素寬度超過父元素時，會造成右邊寬度溢位。

CSS實現子元素自動充滿父元素的剩餘空間

在實際使用中，我們佈局時會遇到，父級下面有多個元素，上面的子元素為固定高度，後面的子元素自動充滿父級的剩餘空間，如圖：

vue中v-for迴圈選中點選的元素並對該元素新增樣式操作

相信大家都會遇到這種情況：v-for迴圈時，我只需要點選到的元素做出相應反應，其他的元素不變；但是往往所有v-for迴圈出的元素都會變化。如下面的程式碼：我需要點選到的元素新增一個類樣式，其他元素不變，但是這樣

父元素如何圍住浮動子元素

父元素如何圍住浮動子元素 bug出現：父元素如何圍住浮動子元素（當元素使用float屬性，將脫離文件流，因此父元素便不會包圍它。）

子元素設定margin影響父元素

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title></title>

JS陣列元素| 讓父元素依次與子元素合併成一個新物件，並組成新陣列

前言原本是想根據後臺返回資料渲染表格，但發現結構不允許。如下： var res={

VueDay14子元素通過$parent或者$root傳值父元素

從父元件傳值到子元件因為父元素的方法可以直接修改父元素的資料，所以將父元素的方法傳遞給子元素，然後子元素進行呼叫，從而修改父元素的資料$root,$parent,$children

子元素在父元素中水平垂直居中的幾種方式

子元素、父元素HTML結構如下： <div class=\"wrapper\"> <div class=\"inner\"></div>

css中子元素設定margin-top為什麼影響了父元素

本文介紹了css中子元素設定margin-top為什麼影響了父元素，分享給大家，具體如下：

Flutter點選事件的穿透,父元素點選事件覆蓋了子元素點選的問題

在web 中類似的情況的都被成為點選穿透事件在flutter中，元件的巢狀也存在類似情況，flutter中的所有點選事件一層一層原始碼找最終都是

vue阻止子元素觸發父元素的事件，事件冒泡處理

技術標籤：遇到問題 <div @click="click1"> <div @click="click2"></div>

給子元素設定了margin後，父元素的跟著一起動了

技術標籤：csshtmlhtml5 我在整理css居中垂直時，發現了一個問題： .container { width: 300px;

子元素margin-top導致父元素移動的問題

問題描述今天在修改頁面樣式的時候，遇到子元素設定margin-top 但是並沒有使得子元素與父元素之間產生間隔，而是作用在了其父元素上，導致父元素產生了一個margin-top 的效果。

vue 父元素給子元素傳資料 props

技術標籤：vuevue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JQuery獲取某個父元素的所有子元素/JQuery獲取某個父元素的符合條件的子元素/JQuery獲取某個父元素的子元素，過濾掉不符合條件的

1.JQuery獲取某個父元素的所有子元素：例如給id=\"app\"的所有子元素加上class=\"main\"以實現某些功能，就可以這麼寫：$(\"#app\").find(\"*\").addClass(\"main\");`

兩個div疊在一起各自呼叫不同的方法/ 阻止子元素的click事件冒泡到父元素 /event.stopPropagation() 的使用

1、效果圖： 2、event.stopPropagation() 定義菜鳥教程：https://www.runoob.com/jquery/event-stoppropagation.html

vue 專案，通知子元件更新，父元件中每次點選按鈕重新載入子元件，（重新生成dom 元素）

vue是元件化開發的專案，很多情況下會把公共元件提取出來，來減少程式碼量，提高開發效率，和以後更好的可維護性。

float浮動，父級元素邊框塌陷問題

　　當我們使用float浮動子元素時，肯定會影響父元素的邊框。父級元素邊框塌陷的原因是，當父元素沒有設定足夠的大小時，父元素的高度是由父元素中最高子元素的高度決定的。一旦子元素浮動，脫離了文件流不再佔據原本

圖片針對父元素居中 TileImg

引數說明引數是一個數組，可傳多個 parent img的父元素（針對誰居中） img img元素