html清除浮動的幾種方法示例

當前位置：首頁 > 范文|應用文 > IT技術專欄 > 網(wǎng)頁制作

html清除浮動的幾種方法示例

來源：易賢網(wǎng) 閱讀：1153 次日期：2014-12-19 11:53:24

溫馨提示：易賢網(wǎng)小編為您整理了“html清除浮動的幾種方法示例”,方便廣大網(wǎng)友查閱！

使用display：inline-block會出現(xiàn)的情況：

1.使塊元素在一行顯示

2.使內(nèi)嵌支持寬高

3.換行被解析了

4.不設置的時候?qū)挾扔蓛?nèi)容撐開

5.在IE6,7下步支持塊標簽

由于inline-block屬性換行的時候被解析（有間隙）故解決方法使用浮動float:left/right

使用浮動時出現(xiàn)的情況：

1.使塊元素在一行顯示

2.使內(nèi)嵌元素支持寬高

3.不設置不寬高的時候?qū)挾扔蓛?nèi)容撐開

4.換行不被解析（故使用行內(nèi)元素的時候清除間隙的方法可以使用浮動）

5.元素添加浮動，會脫離文檔流，按照指定的一個方向移動，直到碰到父級的邊界或者另一個浮動元素停止（文檔流是文檔中可顯示對象在排列時所占用的位置）

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

div,span{height:100px;background:red;border:1px solid #000; float:left;}

inline-block

1.使塊元素在一行顯示

2.使內(nèi)嵌支持寬高

3.換行被解析了

4.不設置寬度的時候?qū)挾扔蓛?nèi)容撐開

5.在IE6,7下不支持塊標簽

浮動:

1.使塊元素在一行顯示

2.使內(nèi)嵌支持寬高

3.不設置寬度的時候?qū)挾扔蓛?nèi)容撐開

</style>

</head>

<body>

</body>

</html>

下面的代碼只有box1浮動，則box1，box2重疊一起。兩者都浮動就不會重疊

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

.box1{ width:100px;height:100px;background:red; float:left;}

.box2{ width:200px;height:200px;background:blue; /* float:left;*/}

</style>

</head>

<body>

</body>

</html>

清浮動的方法：

1.給父級也加浮動（這種情況當父級margin:0 auto;時不居中）

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

清浮動

1.給父級也加浮動(不居中了)

</style>

</head>

<body>

</div>

</body>

</html>

2.給父級加display:inline-block;(同方法1，不居中。只有IE6,7居中)

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

清浮動

1.給父級也加浮動

2.給父級加display:inline-block

</style>

</head>

<body>

</div>

</body>

</html>

3.在浮動元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，塊元素有最小高度，即當height<19px時，默認為19px，解決方法：font-size:0;或overflow:hidden;

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;}

清浮動

1.給父級也加浮動

2.給父級加display:inline-block

3.在浮動元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

</style>

</head>

<body>

</div>

</body>

</html>

4.在浮動元素下加<br clear="all">

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

清浮動

1.給父級也加浮動

2.給父級加display:inline-block

3.在浮動元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮動元素下加<br clear="all"/>

</style>

</head>

<body>

</div>

</body>

</html>

5.給浮動元素父級加{zoom:1;}

:after{content:""; display:block;clear:both;}

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{content:""; display:block;clear:both;}

清浮動

1.給父級也加浮動

2.給父級加display:inline-block

3.在浮動元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮動元素下加<br clear="all"/>

5. 給浮動元素的父級加{zoom:1;}

:after{content:""; display:block;clear:both;}

**在IE6，7下浮動元素的父級有寬度就不用清浮動

haslayout 根據(jù)元素內(nèi)容的大小或者父級的父級的大小來重新的計算元素的寬高

display: inline-block

height: (任何值除了auto)

float: (left 或 right)

width: (任何值除了auto)

zoom: (除 normal 外任意值)

</style>

</head>

<body>

</div>

</body>

</html>

6.給浮動元素父級加overflow:auto;

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

.box{ width:300px;border:1px solid #000;overflow:auto;}

.div1{ width:260px;height:400px;background:Red;float:left;}

</style>

</head>

<body>

</div>

</body>

</html>

更多信息請查看IT技術專欄

更多信息請查看網(wǎng)頁制作

上一篇：li中插入img圖片間有空隙的解決方案

下一篇：小技巧處理div內(nèi)容溢出

易賢網(wǎng)手機網(wǎng)站地址：html清除浮動的幾種方法示例

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關閱讀網(wǎng)頁制作

使用CSS制作立體導航欄10月30日

用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標的實現(xiàn)代碼(增進用戶體驗)10月30日

html5實現(xiàn)圖片轉(zhuǎn)圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實現(xiàn)移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務器10月30日

Dreamweaver怎么設計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實現(xiàn)json和echarts圖表展現(xiàn)在同一個界面10月30日

解決HTML5手機端頁面縮放的問題10月30日

利用純CSS實現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁排版09月29日

HTML5+CSS3 實現(xiàn)靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓報班

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合