亚洲中文字幕片区三区四区,国产系列在线播放

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

html清除浮動(dòng)的幾種方法示例

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

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

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

1.使塊元素在一行顯示

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

3.換行被解析了

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

5.在IE6,7下步支持塊標(biāo)簽

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

使用浮動(dòng)時(shí)出現(xiàn)的情況：

1.使塊元素在一行顯示

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

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

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

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

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<style>

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

inline-block

1.使塊元素在一行顯示

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

3.換行被解析了

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

5.在IE6,7下不支持塊標(biāo)簽

浮動(dòng):

1.使塊元素在一行顯示

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

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

</style>

</head>

<body>

</body>

</html>

下面的代碼只有box1浮動(dòng)，則box1，box2重疊一起。兩者都浮動(dòng)就不會(huì)重疊

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<style>

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

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

</style>

</head>

<body>

</body>

</html>

清浮動(dòng)的方法：

1.給父級(jí)也加浮動(dòng)（這種情況當(dāng)父級(jí)margin:0 auto;時(shí)不居中）

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<style>

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

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

清浮動(dòng)

1.給父級(jí)也加浮動(dòng)(不居中了)

</style>

</head>

<body>

</div>

</body>

</html>

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

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<style>

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

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

清浮動(dòng)

1.給父級(jí)也加浮動(dòng)

2.給父級(jí)加display:inline-block

</style>

</head>

<body>

</div>

</body>

</html>

3.在浮動(dòng)元素下加<div class="clear"></div>

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

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<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;}

清浮動(dòng)

1.給父級(jí)也加浮動(dòng)

2.給父級(jí)加display:inline-block

3.在浮動(dòng)元素下加<div class="clear"></div>

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

</style>

</head>

<body>

</div>

</body>

</html>

4.在浮動(dòng)元素下加<br clear="all">

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<style>

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

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

清浮動(dòng)

1.給父級(jí)也加浮動(dòng)

2.給父級(jí)加display:inline-block

3.在浮動(dòng)元素下加<div class="clear"></div>

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

4.在浮動(dòng)元素下加<br clear="all"/>

</style>

</head>

<body>

</div>

</body>

</html>

5.給浮動(dòng)元素父級(jí)加{zoom:1;}

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

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<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;}

清浮動(dòng)

1.給父級(jí)也加浮動(dòng)

2.給父級(jí)加display:inline-block

3.在浮動(dòng)元素下加<div class="clear"></div>

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

4.在浮動(dòng)元素下加<br clear="all"/>

5. 給浮動(dòng)元素的父級(jí)加{zoom:1;}

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

**在IE6，7下浮動(dòng)元素的父級(jí)有寬度就不用清浮動(dòng)

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

display: inline-block

height: (任何值除了auto)

float: (left 或 right)

width: (任何值除了auto)

zoom: (除 normal 外任意值)

</style>

</head>

<body>

</div>

</body>

</html>

6.給浮動(dòng)元素父級(jí)加overflow:auto;

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<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>

更多信息請(qǐng)查看IT技術(shù)專欄

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

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

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

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

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

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

使用CSS制作立體導(dǎo)航欄10月30日

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

有關(guān)HTML5中背景音樂的自動(dòng)播放功能10月30日

HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼(增進(jìn)用戶體驗(yàn))10月30日

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

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

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

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

Dreamweaver怎么設(shè)計(jì)彩色邊框的表格?10月30日

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

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

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

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

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

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

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

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

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

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

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

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

2025國考·省考課程試聽報(bào)名

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼