css 中 float 和 clear 的作用
生活随笔
收集整理的這篇文章主要介紹了
css 中 float 和 clear 的作用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
相當于原來的 align 的作用，但能力要比 align 強的多。一旦發出float:left或float:right命令，被我浮動的對像就會向左或向右移動直到遇到邊框( border) 、填充( padding） 、邊界( margin ）或者另一個塊對象的邊緣為止。
經典樣式：
1、圖文環繞：
<div style="width:400px;height:10px;background-color: #66CCFF;?border: 1px solid #66CCCC;
float:left;">
</div>
<p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
2、浮動對象有負邊界的情況：
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>浮動對象有負邊界的情況[請用標準瀏覽器查看]</title>
<style?type="text/css">
<!--
*?{}{margin:0px;?padding:0px;}
body?{}{margin:50px;?font-size:12px;}
#box?{}{background-color:?#66CCFF;??height:?100px;?width:?300px;?border:?1px?solid?#66CCCC;?}?
#box2?{}{background-color:?#33CC99;margin:-10px?10px?0px?0px;?height:20px;?width:?100px;?border:?1px?solid?#336666;float:right;}
-->
</style>
</head>?
<body>
<div?id="box">
??<div?id="box2">margin-top:-15px</div>
右上方小盒子邊界是margin:-10px?10px?0px?0px;，folat:right，這個效果還可以吧，這可不是用相對、或者絕對定位做出來的哦，部分文字還是有環繞效果。如果在上面小盒子輸標題，在這大盒子內部輸內容，這種類型的網頁版面效果還可以的，大家可以舉一反三，多做出另外類似的效果來。</div>
</body>
</html>?
3.如果一個較寬的子盒子在一個較窄的父盒子中擁有浮屬性，子盒子漂浮后不會影響到父盒子的寬度，子盒子超出父盒子的部分會越到父盒子外面，但越出父盒子外的部分不會引起外邊文本流的移動，而會直接覆蓋在外邊文字上面的.
4.如果父盒子不設定高度或者高度為自動，而其子盒子設定了浮動，并且高度超過了父盒子，在標準瀏覽器中，父盒子高度是不能自適高度，但是這種高度自適應常是我們需要的，如何做到讓高度自適應呢，常見的辦法是在父級內，浮動子盒子后邊加入以下代碼：<div style="clear:both"></div>清除掉那個小盒子的浮動。
<div id="box">
????<div id="subBox">高度隨著內容變大</div>
????<div id = "removefloat" style="clear:both"></div>
</div>
5.沒有設定寬度而又沒有內容的對象浮動后寬度會趨近于0。
6.
? 并排的同一浮動方向的對像在一行中放不下時，可以自動換行;
? 浮動盒子在本文流中出現的位置會影響它的水平浮動位置，就像下面運行框效果，那些盒子并不是緊跟著一起出現的，之間有文本存在，所以結果造成所有等高的盒子并不是同一直線排列出現，而變成有一定的梯度。如果兩個盒子之間文本流區塊高度大于前邊浮動元素高度時，緊接著的同一浮動方向的對象將會被自動換行顯示;
------------------ clear ------------------------------------
1.如果你想一段文本流兩邊可以出現浮動對像的話，你可以用clear:none，看下面效果，藍色背景段落兩邊的盒子是浮動的哦。
2．如果你要為一個網頁準備一個頁腳區塊，比如<div id=”footer”></div>，你在設計網頁的時候，你想不管你前邊怎么浮動排版而又不想這個頁腳跟上去，讓它一直保持在前邊內容后邊，而且還是換行獨立顯示的，那么給這個頁腳區塊樣式加個clear:both吧。?
經典樣式：
1、圖文環繞：
<div style="width:400px;height:10px;background-color: #66CCFF;?border: 1px solid #66CCCC;
float:left;">
</div>
<p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
2、浮動對象有負邊界的情況：
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>浮動對象有負邊界的情況[請用標準瀏覽器查看]</title>
<style?type="text/css">
<!--
*?{}{margin:0px;?padding:0px;}
body?{}{margin:50px;?font-size:12px;}
#box?{}{background-color:?#66CCFF;??height:?100px;?width:?300px;?border:?1px?solid?#66CCCC;?}?
#box2?{}{background-color:?#33CC99;margin:-10px?10px?0px?0px;?height:20px;?width:?100px;?border:?1px?solid?#336666;float:right;}
-->
</style>
</head>?
<body>
<div?id="box">
??<div?id="box2">margin-top:-15px</div>
右上方小盒子邊界是margin:-10px?10px?0px?0px;，folat:right，這個效果還可以吧，這可不是用相對、或者絕對定位做出來的哦，部分文字還是有環繞效果。如果在上面小盒子輸標題，在這大盒子內部輸內容，這種類型的網頁版面效果還可以的，大家可以舉一反三，多做出另外類似的效果來。</div>
</body>
</html>?
3.如果一個較寬的子盒子在一個較窄的父盒子中擁有浮屬性，子盒子漂浮后不會影響到父盒子的寬度，子盒子超出父盒子的部分會越到父盒子外面，但越出父盒子外的部分不會引起外邊文本流的移動，而會直接覆蓋在外邊文字上面的.
4.如果父盒子不設定高度或者高度為自動，而其子盒子設定了浮動，并且高度超過了父盒子，在標準瀏覽器中，父盒子高度是不能自適高度，但是這種高度自適應常是我們需要的，如何做到讓高度自適應呢，常見的辦法是在父級內，浮動子盒子后邊加入以下代碼：<div style="clear:both"></div>清除掉那個小盒子的浮動。
<div id="box">
????<div id="subBox">高度隨著內容變大</div>
????<div id = "removefloat" style="clear:both"></div>
</div>
5.沒有設定寬度而又沒有內容的對象浮動后寬度會趨近于0。
6.
? 并排的同一浮動方向的對像在一行中放不下時，可以自動換行;
? 浮動盒子在本文流中出現的位置會影響它的水平浮動位置，就像下面運行框效果，那些盒子并不是緊跟著一起出現的，之間有文本存在，所以結果造成所有等高的盒子并不是同一直線排列出現，而變成有一定的梯度。如果兩個盒子之間文本流區塊高度大于前邊浮動元素高度時，緊接著的同一浮動方向的對象將會被自動換行顯示;
------------------ clear ------------------------------------
1.如果你想一段文本流兩邊可以出現浮動對像的話，你可以用clear:none，看下面效果，藍色背景段落兩邊的盒子是浮動的哦。
2．如果你要為一個網頁準備一個頁腳區塊，比如<div id=”footer”></div>，你在設計網頁的時候，你想不管你前邊怎么浮動排版而又不想這個頁腳跟上去，讓它一直保持在前邊內容后邊，而且還是換行獨立顯示的，那么給這個頁腳區塊樣式加個clear:both吧。?
轉載于:https://www.cnblogs.com/davyjiang/articles/1039317.html
總結
以上是生活随笔為你收集整理的css 中 float 和 clear 的作用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css_01_承接部分html+css快
- 下一篇： 4.8网络层设备