css清除浮动举例详说
css设计浮动属性的主要目的,是为了实现文本绕排图片的效果。
一.浮动
当浮动一张图片或者其他元素时,浏览器会将浮动元素往上方推,直到它碰到父元素的内边界。后面的元素不再认为浮动元素在文档流中位于它的前面了,因为它就会占据父元素左上角的位置。
值得说明的是:css在呈现元素的时候都要将元素生成矩形盒子,这个矩形盒子实际上分为内容和边框组成的上 半部分,以及背景颜色和背景图片组成的下半部分,浮动只是浮动起半层,所以从浏览器中看到文本会绕开浮动的图片。
二.清除浮动之围住浮动元素的三种方法
例如html:
<section> <img src="images/mtuj01.jpg" alt=""> <p>浮动很有趣</p> </section> <footer>这里是底部的元素,存放一些文字。</footer>
css:
section{border:1px solid blue;margin:0 0 10px 0;} p{margin:0;} footer{border: 1px solid red;}
上面代码效果图片
当给图片添加做浮动后:
section{border:1px solid blue;margin:0 0 10px 0;float: left;width: 100%;} p{margin:0;} footer{border: 1px solid red;clear: both;} img{float: left;}
浮动section之后,不管其子元素是否浮动,它都会紧紧地包围住它的子元素。这里父元素宽度设置为100%;如果不设置,p还是会在图片下边。
方法三:添加非浮动的清除元素
<section> <img src="images/travel2.jpg" alt=""> <p>浮动很有趣</p> <div style="clear: both;"></div> </section> <footer>这里是底部的元素,存放一些文字。</footer>
原文链接:https://www.qiquanji.com/post/7607.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知