围住浮动元素的三种方法

最新推荐文章于 2024-09-12 15:47:13 发布

xinweilaizhe

最新推荐文章于 2024-09-12 15:47:13 发布

阅读量327

点赞数

分类专栏： web前端文章标签： css html5 web前端浮动元素 float

本文链接：https://blog.csdn.net/xinweilaizhe/article/details/75269486

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

围住浮动元素的三种方法

<section>
         <imgsrc=”images/rubber_duck2.jpg”>
         <p>It’sfun to float.</p>
</section>
<footer>
         Hereis the footer element.
</footer>

（1）、为父元素添加overflow：hidden。

overflow：hidden主要用户保持元素之前设置的宽度，而超大的子内容则会被容器剪切掉，其另一个作用是可靠地迫使父元素包含其浮动的子元素。

section {
         border:1px solid blue;
         margin:0 0 10px 0;
         overflow:hidden;    
}
img {
         float:left;
}
p {
         border:1px solid red;
}

（2）、为父元素设置浮动，该元素之后的非浮动元素设置clear：both。

当父元素A设置为浮动时，它都会紧紧包围（也称收缩包裹）住它的子元素，所以为A元素之后的元素B设置clear：both属性，就会迫使元素B留在A的下面。

section {
         border:1px solid blue;
         float:left;
         width:100%;
}
img {
         float:left;
}
footer {
         border:1px solid red;
         clear:left;
}

（3）、添加非浮动的清除元素

由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素，以及前面的浮动元素。

<1>、法一：直接在已有HTML标记中为父元素添加一个子元素，并给它应用clear属性。

<style>
section {
        
}
</style>
section{
         border:1px solid blue;
}
img {
         float:left;
}
.clear_me {
         clear:left;
}
footer {
         border:1px solid red;
}
 
<section>
         <imgsrc=”images/rubber_duck2.jpg”>
         <p>It’sfun to float.</p>
	 <div class=”clear_me”></div>
</section>
<footer>
         Hereis the footer element.
</footer>

<2>、法二：通过：after伪类达到跟<1>相同的效果

<section class=”clearfix”>
         <imgsrc=”images/rubber_duck2.jpg”>
         <p>It’sfun to float.</p>
</section>
<footer>
         Hereis the footer element.
</footer>
.clearfix:after {
         content:“.”;
         display:block;
         height:0;
         visibility:hidden;
         clear:both;
}

注：以上内容摘自《CSS设计指南》。觉得方法不错，摘录出来与大家共同学习。