CSS清楚浮動clear:both的實例代碼
發(fā)布時間：2020-11-16 11:59:50 作者：困了累了就少敲點₍₍ 
我要評論
我要評論本文通過多種方法給大家介紹CSS清楚浮動clear:both的實例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
今天給大家講一下清楚浮動，在講清除浮動前，需要了解什么是浮動，這里我就不給你大家詳細介紹浮動了。
浮動也就是脫離文檔流，脫離文檔流了，那父級的寬高就不能被子集撐開，所以我們就需要清楚浮動，廢話不多說，我們上代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
margin: 0 auto;
border: 8px solid black;
}
.box::after{
content: "";
clear: both;
display: block;
}
.box .left{
width: 50%;
height: 300px;
background-color: red;
float: left;
}
.box .right{
width: 50%;
height: 300px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
從這里我們可以看到，自己用了浮動，父級的寬高就不能被子集撐開，這樣的話布局就會和你想象的不一樣。這里有很多種解決辦法。
第一種：
在父元素里添加一個div，給添加的div加上清除浮動
<div class="clear"></div>
clear{
clear: both;
}
第二種：
我們可以給父級的div設置高度，這樣也可以。
.box{
width: 1000px;
height: 300px;
margin: 0 auto;
border: 8px solid black;
}
第三種
我們可以給父級加上overflow:hidden；屬性，這樣也可以。
.box{
overflow: hidden;
width: 1000px;
margin: 0 auto;
border: 8px solid black;
}
第四種
我們可以用position: absolute或display: inline-block可以清除浮動。
.box{
/* position: absolute; */
display: inline-block;
width: 1000px;
margin: 0 auto;
border: 8px solid black;
}
其實吧其他四種知道就好，第五種一定要會用，其他四種都是可以清除浮動的，但是他會帶來不必要的麻煩，就拿用第二種來說，如果后期該父級需要添加子元素時，我們還要修改父級的高度，這樣會帶來很多麻煩，第五種也是最實用的一種了。
第五種
用偽元素來清除浮動。我們可以給父級添加偽元素。
.box::after{
content: "";
clear: both;
display: block;
}
到此這篇關于CSS清楚浮動clear:both的實例代碼的文章就介紹到這了,更多相關CSS clear both清除浮動 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了css解決浮動導致父元素高度坍塌的幾種方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-09-04
這篇文章主要介紹了詳解CSS布局中浮動問題的四種解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2020-08-31
這篇文章主要介紹了關于CSS浮動與取消浮動的問題，通過設置元素脫離正常的文檔流讓元素靠左或向右靠近，通過設置文字包周圍圖片來解決浮動問題，具體解決方法跟隨小編一起2021-06-28
