首頁 > 開發者 > JavaScript
清除浮動，css清除浮動
清除浮動 : 實現父元素能被浮動元素撐開
(1)添加<div style="clear:both;"></div>(2) css after 虛擬元素（注意這不是偽類，而是虛擬元素，代表一個元素之後最近的元素）和 IEhack（zoom:1） ，可以完美相容當前主流的各大瀏覽器，這裡的 IEhack 指的是觸發 hasLayoutzoom:1相容IE6、IE7、IE8瀏覽器，經常會遇到一些問題，可以使用zoom:1來解決，有如下作用： 觸發IE瀏覽器的haslayout 解決ie下的浮動，margin重疊等一些問題。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;}
.test{zoom: 1;}/*ie相容*/
.test:after{
content: "564654";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
.before-test{zoom: 1;}
.before-test:before{
content: "564654";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="test" style="border:1px solid red;">
<p style="float: left;height: 100px;border: 1px solid blue;font-size: 14px;">黃金進口的水果科技的反饋結果合法</p>
<p style="float: left;height: 80px;border: 1px solid gray;">xdshgfhgh</p>
<!--<div style="clear: both;"></div>-->
<p class="before-test">sdgfdgfhg</p>
<p>sdgsfhghgfj</p>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
