CSS浮動布局2

時間：2023-09-06 19:48:01 | 來源：網(wǎng)站運營

時間：2023-09-06 19:48:01 來源：網(wǎng)站運營

CSS浮動布局2：今天寫的有點晚，抱歉，那么開始吧，這期補充一下浮動與清除浮動的概念。

1.1 浮動的作用

早期的作用：圖文環(huán)繞




現(xiàn)在的作用：網(wǎng)頁布局

場景：讓垂直布局的盒子變成水平布局，如：一個在左，一個在右

2.1浮動的代碼

屬性名：float

屬性值：

3.1 浮動的特點

1. 浮動元素會脫離標準流（簡稱：脫標），在標準流中不占位置 ? 相當于從地面飄到了空中

2. 浮動元素比標準流高半個級別，可以覆蓋標準流中的元素

3. 浮動找浮動，下一個浮動元素會在上一個浮動元素后面左右浮動

4. 浮動元素有特殊的顯示效果 ? 一行可以顯示多個 ? 可以設(shè)置寬高

注意點： 浮動的元素不能通過text-align:center或者margin:0 auto

2.1書寫網(wǎng)頁導航的一些小tips

1. 清除默認的margin和padding

2. 找到ul，去除小圓點

3. 找到li標簽，設(shè)置浮動讓li一行中顯示

4. 找到a標簽，設(shè)置寬高 → a標簽默認是行內(nèi)元素，默認不能設(shè)置寬高

? 方法一：給a標簽設(shè)置 display : inline-block

? 方法二：給a標簽設(shè)置 display : block

? 方法三：給a設(shè)置 float : left

2.2清除浮動的介紹

含義：清除浮動帶來的影響

影響：如果子元素浮動了，此時子元素不能撐開標準流的塊級父元素

原因：子元素浮動后脫標 → 不占位置

目的：需要父元素有高度，從而不影響其他網(wǎng)頁元素的布局

2.3清除浮動的方法

1、直接設(shè)置父元素高度

優(yōu)點：簡單粗暴，方便

缺點：有些布局中不能固定父元素高度。如：新聞列表

2、額外標簽法

操作： 1. 在父元素內(nèi)容的最后添加一個塊級元素

2. 給添加的塊級元素設(shè)置 clear:both

缺點：會在頁面中添加額外的標簽，會讓頁面的HTML結(jié)構(gòu)變得復雜

3、單偽元素清除法

操作：用偽元素替代了額外標簽

4、雙偽元素清除法

優(yōu)點：項目中使用，直接給標簽加類即可清除浮動

5、給父元素設(shè)置overflow : hidden

1. 直接給父元素設(shè)置 overflow : hidden

優(yōu)點：方便

---

（拓展補充）BFC的介紹

塊格式化上下文（Block Formatting Context）：BFC

是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，

也是浮動元素與其他元素交互的區(qū)域。

創(chuàng)建BFC方法：

1. html標簽是BFC盒子

2. 浮動元素是BFC盒子

3. 行內(nèi)塊元素是BFC盒子

4. overflow屬性取值不為visible。如：auto、hidden…

5. ……

BFC盒子常見特點：

1. BFC盒子會默認包裹住內(nèi)部子元素（標準流、浮動）→ 應用：清除浮動

2. BFC盒子本身與子元素之間不存在margin的塌陷現(xiàn)象 → 應用：解決margin的塌陷