CSS清楚浮動(dòng)clear:both的實(shí)例代碼
我要評(píng)論今天給大家講一下清楚浮動(dòng)，在講清除浮動(dòng)前，需要了解什么是浮動(dòng)，這里我就不給你大家詳細(xì)介紹浮動(dòng)了。
浮動(dòng)也就是脫離文檔流，脫離文檔流了，那父級(jí)的寬高就不能被子集撐開(kāi)，所以我們就需要清楚浮動(dòng)，廢話(huà)不多說(shuō)，我們上代碼。
<!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>
從這里我們可以看到，自己用了浮動(dòng)，父級(jí)的寬高就不能被子集撐開(kāi)，這樣的話(huà)布局就會(huì)和你想象的不一樣。這里有很多種解決辦法。
第一種：
在父元素里添加一個(gè)div，給添加的div加上清除浮動(dòng)
<div class="clear"></div>
clear{
clear: both;
}
第二種：
我們可以給父級(jí)的div設(shè)置高度，這樣也可以。
.box{
width: 1000px;
height: 300px;
margin: 0 auto;
border: 8px solid black;
}
第三種
我們可以給父級(jí)加上overflow:hidden；屬性，這樣也可以。
.box{
overflow: hidden;
width: 1000px;
margin: 0 auto;
border: 8px solid black;
}
第四種
我們可以用position: absolute或display: inline-block可以清除浮動(dòng)。
.box{
/* position: absolute; */
display: inline-block;
width: 1000px;
margin: 0 auto;
border: 8px solid black;
}
其實(shí)吧其他四種知道就好，第五種一定要會(huì)用，其他四種都是可以清除浮動(dòng)的，但是他會(huì)帶來(lái)不必要的麻煩，就拿用第二種來(lái)說(shuō)，如果后期該父級(jí)需要添加子元素時(shí)，我們還要修改父級(jí)的高度，這樣會(huì)帶來(lái)很多麻煩，第五種也是最實(shí)用的一種了。
第五種
用偽元素來(lái)清除浮動(dòng)。我們可以給父級(jí)添加偽元素。
.box::after{
content: "";
clear: both;
display: block;
}
到此這篇關(guān)于CSS清楚浮動(dòng)clear:both的實(shí)例代碼的文章就介紹到這了,更多相關(guān)CSS clear both清除浮動(dòng) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css解決浮動(dòng)導(dǎo)致父元素高度坍塌的幾種方法
這篇文章主要介紹了css解決浮動(dòng)導(dǎo)致父元素高度坍塌的幾種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-09-04
詳解CSS布局中浮動(dòng)問(wèn)題的四種解決方案
這篇文章主要介紹了詳解CSS布局中浮動(dòng)問(wèn)題的四種解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2020-08-31
關(guān)于CSS浮動(dòng)與取消浮動(dòng)的問(wèn)題
這篇文章主要介紹了關(guān)于CSS浮動(dòng)與取消浮動(dòng)的問(wèn)題，通過(guò)設(shè)置元素脫離正常的文檔流讓元素靠左或向右靠近，通過(guò)設(shè)置文字包周?chē)鷪D片來(lái)解決浮動(dòng)問(wèn)題，具體解決方法跟隨小編一起2021-06-28
