當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Web前端，CSS中的浮动、清除浮动

發布時間：2023/12/15 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web前端，CSS中的浮动、清除浮动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

持續總結輸出中，今天分享的是Web前端，CSS中的浮動、清除浮動。浮動和清除浮動是我們常用的css樣式。今天我們就來了解他們。

1、浮動的作用

早期的作用:圖文環繞

現在的作用:網頁布局
? 場景:讓垂直布局的盒子變成水平布局，如:一個在左，一個在右

2、浮動的代碼

屬性：float 浮動

屬性名效果

left	左浮動
right	右浮動

3、浮動的特點

浮動元素會脫離標準流(簡稱:脫標)，在標準流中不占位置
? 相當于從地面飄到了空中

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

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

浮動元素有特殊的顯示效果
? 一行可以顯示多個
? 可以設置寬高

注意點:

? 浮動的元素不能通過text-align:center或者margin:0 auto

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 浮動的標簽頂對齊 *//* 浮動: 在一行排列, 寬高生效 -- 浮動后的標簽具備行內塊特點 */.one {width: 100px;height: 100px;background-color: pink;float: left;margin-top: 50px;}.two {width: 200px;height: 200px;background-color: skyblue;float: left;/* 因為有浮動, 不能生效 - 盒子無法水平居中 */margin: 0 auto;}.three {width: 300px;height: 300px;background-color: orange;}</style> </head> <body><div class="one">one</div><div class="two">two</div><div class="three">three</div> </body> </html>

運行結果：

4、浮動的案例

參考頁面布局

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.top {/* 寬度高度背景色 */height: 40px;background-color: #333;}.header {width: 1226px;height: 100px;background-color: #ffc0cb;margin: 0 auto;}.content {width: 1226px;height: 460px;background-color: green;margin: 0 auto;}.left {float: left;width: 234px;height: 460px;background-color: #ffa500;}.right {float: left;width: 992px;height: 460px;background-color: #87ceeb;}/* CSS書寫順序: 瀏覽器執行效率更高1. 浮動 / display2. 盒子模型: margin border padding 寬度高度背景色3. 文字樣式*/</style> </head> <body><div class="top"></div><div class="header">頭部</div><div class="content"><div class="left">left</div><div class="right">right</div></div> </body> </html>

運行結果：

參考頁面產品布局

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {margin: 0 auto;width: 1226px;height: 614px;/* background-color: pink; */}.left {float: left;width: 234px;height: 614px;background-color: #800080;}.right {float: right;width: 978px;height: 614px;/* background-color: green; */}ul {/* 去掉列表的符號 */list-style: none;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: #87ceeb;}/* 如果父級的寬度不夠, 子級會自動換行 *//* 第四個li和第八個li右側間距清除 */.right li:nth-child(4n) {margin-right: 0;}</style> </head> <body><div class="box"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div> </body> </html>

運行結果：

導航參考

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.nav {margin: 50px auto;width: 640px;height: 50px;background-color: #ffc0cb;}ul {list-style: none;}.nav li {float: left;}.nav li a {/* 1. 浮動 / display *//* display: inline-block; */display: block;/* 2. 盒子模型 */width: 80px;height: 50px;/* background-color: green; *//* 3. 文字樣式 */text-align: center;line-height: 50px;color: #fff;text-decoration: none;}.nav li a:hover {background-color: green;}</style> </head> <body><div class="nav"><ul><li><a href="#">博客</a></li><li><a href="#">下載.課程</a></li><li><a href="#">學習</a></li><li><a href="#">問答</a></li><li><a href="#">社區</a></li><li><a href="#">插件</a></li><li><a href="#">認證</a></li><li><a href="#">開源</a></li></ul></div> </body> </html>

運行結果：

書寫網頁導航步驟:

清除默認的margin和padding

找到ul，去除小圓點

找到li標簽，設置浮動讓li一行中顯示

找到a標簽，設置寬高 → a標簽默認是行內元素，默認不能設置寬高??
? 方法一:給a標簽設置 display : inline-block
? 方法二:給a標簽設置 display : block
? 方法三:給a設置 float : left

5、清除浮動的介紹

清除浮動帶來的影響
? 影響:如果子元素浮動了，此時子元素不能撐開標準流的塊級父元素

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

目的:
? 需要父元素有高度，從而不影響其他網頁元素的布局

6、清除浮動的方法

清除浮動的方法

1.直接設置父元素高度

優點:
簡單粗暴，方便

缺點:
有些布局中不能固定父元素高度。如:新聞列表、京東推薦模塊

2.額外標簽法

方法:

在父元素內容的最后添加一個塊級元素

給添加的塊級元素設置 clear:both

缺點:
會在頁面中添加額外的標簽，會讓頁面的HTML結構變得復雜

3.單偽元素清除法

方法:
用偽元素替代了額外標簽

1、基本寫法 .clearfix::after {content: '';display: block;clear: both;} 2、補充寫法 .clearfix::after {content: '';display: block;clear: both;/* 補充代碼：在網頁中看不到偽元素 */height: 0;visibility: hidden; }

優點:
項目中使用，直接給標簽加類即可清除浮動

4.偽元素清除法

方法:

/* 清除浮動 */ .clearfix::before, .clearfix::after {content: '';display: table; }/* 真正清除浮動的標簽 */ .clearfix::after {clear: both; }

優點:

項目中使用，直接給標簽加類即可清除浮動

5.給父元素設置overflow : hidden
方法:
直接給父元素設置 overflow : hidden

優點:
方便

參考案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;overflow: hidden;}.bottom {height: 100px;background-color: green;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;}</style> </head> <body><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div> </body> </html>

運行結果：

7、BFC的介紹

塊格式化上下文(Block Formatting Context):BFC
? 是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。

創建BFC方法:

html標簽是BFC盒子

浮動元素是BFC盒子

行內塊元素是BFC盒子

overflow屬性取值不為visible。如:auto、hidden…

…

BFC盒子常見特點:

BFC盒子會默認包裹住內部子元素(標準流、浮動)→ 應用:清除浮動

BFC盒子本身與子元素之間不存在margin的塌陷現象 → 應用:解決margin的塌陷

…

8、總結

最后分享一句話：

真正的朋友，無論男女，若是相知，必然相惜，若真相惜，只為真心，無關風月。
《麥田里的守望者》
——「美」塞林格

本次的分享就到這里了！！！如果覺得還不錯，請不要忘記點贊?，收藏?，加關注?哦 ?? ?? ??

總結

以上是生活随笔為你收集整理的Web前端，CSS中的浮动、清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：第二周铁人战队学习总结
下一篇： 2017年html5行业报告,云适配发布