HTML5學習_day05(6)--html之佈局中使用浮動帶來的問題

原創

2020-06-24 20:35

問題1:

如果兩個相鄰兄弟塊級元素，給第一個元素float，那麼後面的未設置float的塊級元素就會無視這個浮動元素的存在，佔據浮動元素原有的空間，發生了佈局的重疊。

問題2.

對於父子級元素，子元素設置了float，如果父級元素沒有設置固定的高度的話，則會導致父級元素高度塌陷。

問題3.

背景不顯示

問題4.

邊框不能撐開

問題5.

margin設置的值不能正確顯示-->

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

相關文章

HTML5學習_day05(1)--html浮動之文檔佈局

文檔佈局的4種方式： 1.流式佈局(自然佈局) 特點：沒有任何修飾(沒有定位float 定位彈性)的佈局，也就是元素在排版過程中，元素從上到下，從左到右的流式排列，遇塊(塊級元素)換行等。

2020-06-24 20:35:35

HTML5學習_day05(5)--html之float元素的規則

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動元素的細則</title> <style type="text/css"> div

2020-06-24 19:20:04

HTML5學習_day05(7)--html之佈局中使用浮動帶來的問題

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解決float帶來的佈局問題</title> <style type="text/css">

2020-06-24 19:20:03

HTML5學習_day03(3)--a標籤僞類(四種狀態樣式變化)

標籤未被點擊過的效果 a:link{ color: red; } 定義標籤訪問後的效果(測試時無法還原link效果時清理瀏覽器緩存) a:visited{ color:black; } 鼠標懸浮在標籤位置時效果 a:hover{ co

2020-06-24 19:20:03

HTML5學習_day05(4)--html之float具體表現

2020-02-20 13:44:33

HTML5學習_day06(1)--html之定位的定義

2020-02-20 13:44:33

HTML5學習_day06(2)--html之相對定位

2020-02-20 13:44:33

HTML5學習_day05(2)--html文檔流和脫離文檔流

2020-02-20 13:44:33

HTML5學習_day03(4)--html盒模型瞭解

2020-02-20 13:44:33

HTML5學習_day05(3)--html之float定義

2020-02-20 13:44:32

HTML5學習_day05(8)--html之僞類元素選擇器(僞元素)

2020-02-20 13:44:32

HTML5學習_day06(3)--html之絕對定位

2020-02-20 13:44:32

HTML5學習_day03(2)--html之a標籤(超鏈接)

2020-02-20 13:44:32

HTML5學習_day05(1)--html浮動之文檔佈局

文檔佈局的4種方式： 1.流式佈局(自然佈局) 特點：沒有任何修飾(沒有定位float 定位彈性)的佈局，也就是元素在排版過程中，元素從上到下，從左到右的流式排列，遇塊(塊級元素)換行等。

2020-06-24 20:35:35

HTML5學習_day05(5)--html之float元素的規則

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動元素的細則</title> <style type="text/css"> div

2020-06-24 19:20:04

24小時熱門文章

最新文章

最新評論文章