P40-前端基礎-BFC解決浮動帶來的高度塌陷問題

P40-前端基礎-BFC解決浮動帶來的高度塌陷問題

1.概述

使用浮動有利于頁面的布局，但是他也有一個問題就是高度塌陷。

在浮動布局中，父元素的高度默認是被子元素撐開的，當子元素浮動后，其會完全脫離文檔流，

子元素從文檔流中脫離，將會無法撐起父元素的高度，導致父元素的高度丟失

2.浮動高度塌陷展示

2.1.設置浮動前父元素高度不會塌陷

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

2.2.子元素浮動父元素高度塌陷

子元素開啟浮動

父元素高度塌陷

3.解決高度塌陷

BFC(Block Formatting Context) 塊級格式化環境

BFC是一個CSS中的一個隱含的屬性，可以為一個元素開啟BFC，開啟BFC該元素會變成一個獨立的布局區域

元素開啟BFC后的特點：

1.開啟BFC的元素不會被浮動元素所覆蓋

2.開啟BFC的元素子元素和父元素外邊距不會重疊

3.開啟BFC的元素可以包含浮動的子元素

可以通過一些特殊方式來開啟元素的BFC：

1、設置元素的浮動（不推薦）

2、將元素設置為行內塊元素（不推薦）

3、將元素的overflow設置為一個非visible的值

常用的方式 為元素設置 overflow:hidden 開啟其BFC 以使其可以包含浮動元素

3.1.父元素開啟BFC前后效果對比

父元素未開啟BFC前高度塌陷帶來的三個問題

父元素開啟BFC解決高度塌陷三個問題

3.2.父元素開啟BFC之父元素開啟浮動

父元素開啟浮動

父元素開啟浮動效果

3.3.父元素開啟BFC之父元素開啟行內塊元素

設置父元素樣式為行內塊元素

父元素開啟行內塊元素效果

3.4.父元素開啟BFC之父元素開啟overflow（推薦）

父元素開啟overflow

父元素開啟overflow效果

web前端 容器

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。