欧美日韩成人一区,re久久精品视频,亚洲人成网www

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

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

來源：易賢網閱讀：1185 次日期：2014-12-19 11:53:24

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

使用display：inline-block會出現的情況：

1.使塊元素在一行顯示

2.使內嵌支持寬高

3.換行被解析了

4.不設置的時候寬度由內容撐開

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

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

使用浮動時出現的情況：

1.使塊元素在一行顯示

2.使內嵌元素支持寬高

3.不設置不寬高的時候寬度由內容撐開

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

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

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

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

<style>

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

inline-block

1.使塊元素在一行顯示

2.使內嵌支持寬高

3.換行被解析了

4.不設置寬度的時候寬度由內容撐開

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

浮動:

1.使塊元素在一行顯示

2.使內嵌支持寬高

3.不設置寬度的時候寬度由內容撐開

</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 根據元素內容的大小或者父級的父級的大小來重新的計算元素的寬高

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技術專欄

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

下一篇：小技巧處理div內容溢出

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

由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢為準！

相關閱讀網頁制作

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

用純CSS3實現網頁中常見的小箭頭10月30日

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

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

html5實現圖片轉圈的動畫效果——讓頁面動起來10月30日

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

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

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

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

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

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

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

利用純CSS實現居中的七大方法示例09月29日

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

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

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

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

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

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

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

易賢網移動網站

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

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

中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久