html 清除浮动怎么写,清除浮动的css写法有哪些
本文通過圖文并茂的形式給大家介紹了CSS浮動與清除浮動的實例代碼，非常不錯，具有一定的參考借鑒價值，,需要的朋友可以參考下
一、float(浮動)是什么
float 屬性定義元素在哪個方向浮動。
float:left 元素向左浮動。
float:right 元素向右浮動。
float:none 默認值。元素不浮動，并會顯示在其在文本中出現的位置。
float:inherit 規定應該從父元素繼承 float 屬性的值。
看一段簡單的代碼：
左浮動右浮動喵.child1 {
float: left;
height: 500px;
width: 70%;
background: #aa0;//黃
}
.child2 {
float: right;
height: 300px;
width: 30%;
background: #0aa;//青
}
.child3 {
background: #a0a;//紫
}
二、clear是什么
clear 屬性指定段落的左側或右側不允許浮動的元素。
clear:left 在左側不允許浮動元素。
clear:right 在右側不允許浮動元素。
clear:both 在左右兩側均不允許浮動元素。
clear:none 默認值。允許浮動元素出現在兩側。
clear:inherit 規定應該從父元素繼承 clear 屬性的值。
比如上面的例子，我們為 child3 加上 clear: both; ，便可清除浮動。(child3的左右兩側都不允許浮動元素，自然而然不會再跟在倆浮動元素的屁股后面了~)
那么，只在一側不允許浮動是怎樣的呢？
本來是醬紫的：那么，只在一側不允許浮動是怎樣的呢？
本來是醬紫的：
child1右浮動child2右浮動哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...
.child1 {
float: right;
background: #aa0;//黃
}
.child2 {
float: right;
background: #0aa;//青
}
然后，為 child2 加上 clear: right; ，在child2的右側不允許浮動元素，所以child2就飄到了下一行。
那么，為 child1 加上 clear: left; 的時候，為什么不起效果呢？在這留個小彩蛋，歡迎大家留言討論~
三、浮動帶來的影響
浮動帶來的最大影響就是，當父元素只包含浮動的子元素的時候，父元素的高度就會塌陷( height 變為 0 )。像醬紫：(parent高度為0，無法顯示粉色背景)
child1右浮動child2右浮動.parent {
background: #FBC;//粉
}
四、清除浮動的方式
1. 在父元素中的結尾加一個空 div
div
child1右浮動child2右浮動.child1 {
float: right;
background: #aa0;
}
.child2 {
float: right;
background: #0aa;
}
可見，空 div 高度為0，位于父盒子的最下面，使父盒子重新撐起了應有的高度。
為什么要在最后加？倘若你在中間加，效果會是醬紫：
由于空 div 的左右都不允許浮動元素，那么它就會另起一段，導致盒子位置的效果就像 child2 清除右側浮動一樣， child2 跑到了 child1 下方。
2. 在父元素設置 overflow 屬性
? 原理：設置 overflow:hidden 或 overflow:auto ，瀏覽器會自動檢查浮動區域高度(才能知道父框的內容有無溢出)
? 優點：瀏覽器支持好
? 缺點：子元素若超出父元素尺寸會被隱藏，或者父元素出現滾動條
child1右浮動child2右浮動當設置 overflow:auto; 時，父元素會出現滾動條：
3.偽元素
? 原理：類似設置clear屬性
? 優點：瀏覽器支持好，普遍
child1右浮動child2右浮動.clearfix{
zoom: 1; //zoom(IE專有屬性)可解決ie6，ie7浮動問題
display: block;
}
.clearfix:after {
content: "."; //content: "";也可
visibility: hidden;
display: block;
height: 0;
clear: both;
}
更多CSS問題的相關技術文章，請訪問CSS問題教程欄目進行學習！
總結
以上是生活随笔為你收集整理的html 清除浮动怎么写,清除浮动的css写法有哪些的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 对计算机网络的父亲,父亲节朋友圈对老爸说
- 下一篇： 浙江省计算机网络技术比赛,[2018年最