首页 / HTML / 围住浮动元素的三种方法-侠奕

围住浮动元素的三种方法-侠奕

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了围住浮动元素的三种方法-侠奕，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2060字，纯文字阅读大概需要3分钟。

内容图文

html代码 
1 <body>
2     <section>
3         <img src="sea.png" alt="sea">
4         <p>图片标题</p>
5     </section>
6     <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. </footer>
7 </body>

CSS代码

 1 p{
 2     margin:0;
 3 }
 4 img{
 5     float:left;
 6 }
 7 section{
 8     border:1px solid green;    
 9     margin:0 0 10px 0;
10 }
11 footer{
12     background-color: #ccc;
13 }

效果图：

围住浮动元素的三种方法-侠奕 - 文章图片、

下面介绍三种围住浮动元素的方法。最终达成的效果都是：

围住浮动元素的三种方法-侠奕 - 文章图片

方法一：为父元素添加 overflow:hidden　　　

1 section{
2     border:1px solid green;    
3     margin:0 0 10px 0;
4     overflow: hidden;
5 }

//overflow：hidden声明的真正用途是 1.防止包含元素被超大内容撑大。应用overflow：hidden之后，包含元素依然保持其特定的宽度，而超大的子内容则会被容器剪切掉；2.它能可靠地迫使父元素包含其浮动的子元素。

方法二：同时浮动父元素

 1 section{
 2     border:1px solid green;
 3     margin:0 0 10px 0;    
 4     width:100%;
 5     float:left;
 6 }
 7 footer{
 8     background-color: #ccc;
 9     clear:left;
10 }

方法三：添加非浮动的清除元素

　　给父元素的最后添加一个非浮动的子元素，然后再清除该子元素。其中有两种方案。

第一种：

　　简单地在HTML中添加一个子元素，并给它应用clear属性。

1 <body>
2     <section>
3         <img src="sea.png" alt="sea">
4         <p>图片标题</p>
5         <div class="clear"></div>
6     </section>
7     <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</footer>
8 </body>

　　在此，为div添加了一个类，以便于在CSS中写样式。

1 div.clear{
2     clear:left;
3 }

第二种：

　　如果你特别不想添加这个纯表现性的元素，有一个更好的方法。

　　首先为section添加一个类clearfix

1 <section class="clearfix">
2     <img src="sea.png" alt="sea">
3     <p>图片标题</p>
4 </section>
5 <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</footer>

　　然后，再使用这个神奇的clearfix规则

1 .clearfix:after{
2     content:".";
3     display:block;
4     height:0;
5     visibility:hidden;
6     clear:both;
7 }

　　//这个clearfix规则最早是由程序员Tony Aslett发明的，它只添加了一个清除的包含句点作为非浮动元素。

　　

内容总结

以上是互联网集市为您收集整理的围住浮动元素的三种方法-侠奕全部内容，希望文章能够帮你解决围住浮动元素的三种方法-侠奕所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/408754.html

来源：【匿名】