91精品国产综合久久久,免费高清a级毛片在线播放,最新无码中文字幕一区

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

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

來源：易賢網(wǎng) 閱讀：952 次日期：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)站

2025國考·省考課程試聽報名

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

最新信息

2025年大理州南澗縣事業(yè)單位考核招聘綜合成績及進入體檢人員通知

2025年大理州巍山縣文化和旅游局事業(yè)單位考核招聘面試成績及體檢公告

2024年昆明市醫(yī)療保障基金運行監(jiān)測評估中心選調(diào)擬選調(diào)人員公示

2025年國昆廣源（北京）科技有限公司云南分公司招聘啟事

2025年云南裕能新能源電池材料有限公司二期項目招聘簡章

2025年紅河州和信公證處招聘公告

2025年大理州文化和旅游局事業(yè)單位考核招聘筆試成績及面試名單公告

2025年大理州農(nóng)業(yè)農(nóng)村局事業(yè)單位考核招聘筆試成績及進入面試人員公告

2025年同等學力人員申請碩士學位外國語水平和學科綜合水平全國統(tǒng)一考試通知

2025年同等學力人員申請碩士學位外國語水平和學科綜合水平考試報名通知

公考類

云南公務員貴州公務員四川公務員廣西公務員各省公務員國家公務員選調(diào)遴選

招聘類

事業(yè)單位教師招聘特崗教師三支一扶志愿者銀行招聘國企招聘

各類考試

學歷升學會計考試職業(yè)資格外語考試醫(yī)學考試工程考試教師資格

工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網(wǎng)安備53010202001879號人力資源服務許可證：（云）人服證字（2023）第0102001523號

<center id="s6hi9"></center>