[CSS]CSS浮动十五条规则
编程技术 / houtizong 发布于 3年前 178
这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。
1. 所有的页面元素都可以浮动
2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素
3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了，那么这个浮动的元素的左外边界会停靠在已浮动元素的右外边界
4.如果在div中的多个子div元素都被左浮动,那么，如果这些被浮动的子元素不能被父元素一行所容纳，那么这些浮动的元素会自动换行(这是第三条最后一个规则的例外情况-)
5.浮动元素会尽可能向父元素的顶部停靠，即浮动元素会尽可能的向高位置停靠
6.元素浮动后，不论元素是块级元素，还是行内元素，都会块级元素(第二条规则)，那么对浮动元素设置width属性是有意义的，而且应该为浮动元素添加 width属性，如果不添加width属性，那么width会自动的由原来100%的宽度缩减至刚好容纳内部元素所需要的宽度
7.浮动重叠规则：行内框(如span)与浮动元素重叠时，其边框、背景色、背景图片、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景色、背景图片均在浮动元素之下，而内容在浮动元素之上。
8.浮动元素之间永远不会有折叠，这是第三条和第四条规则的结果。这包括元素框内的相同方向浮动的元素之间不能有重叠，也包括左浮动与右浮动元素之间不能 有重叠。如果一个div内部有两个左浮动元素，其中之一占据大部分空间，那么另外一个左浮动元素只会在剩余的空间里换行找到适合自己的空间在垂直方向上显 示更多的内容，剩余的部分将不能显示(根据父元素的设置决定)
9.浮动元素是块级元素，同普通的块级元素相比，浮动元素的margin-top和上面相邻的元素的margin-bottom在垂直方向上的不会重叠，而普通的块级元素会发生marigin-bottom和margin-top重叠取其较大值的现象
10.同一个元素框内的浮动元素，.后浮动的元素永不会超过先浮动元素的顶端，除非后浮动的元素设置了负的margin-top
11.第三条规则说的是一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果浮动元素设置了负的margin-left，则破坏了这条规则
12.浮动元素的包含块是离它最近的祖先块级节点，包含块指的是浮动元素浮动时的参照物。这和绝对定位的定位参考物不一样，绝对定位参照的是离它最近的带有定位属性(既可以是决定定位，也可以是相对定位)的祖先块级元素
13.当浮动元素的宽度大于容器框的宽度时，这会使得浮动元素超出容器的左右边界：规则是，左浮动时，浮动元素停靠在容器框的左侧而导致右侧超出；右浮动 时，浮动元素停靠在容器框的右侧而导致左侧超出。如果容器设置了overflow:hidden属性，则浮动元素同普通的元素一样，都会将超出的部分隐藏
14.不设高度的父元素框内如果只包含了浮动元素，那么这个父元素框垂直方向上没有被撑开。如果父元素也浮动了，那么父元素框在垂直方向将自动撑开以容纳 它包含的浮动元素。所以我们在使用ul和li制作导航栏时，既可以为ul显式的指定高度，也可以把它也做成左浮动，让它容纳的浮动的li元素将它自动撑开
15.设置了清除浮动(clear:left)的元素，它设置的margin-top将会失效，通常置为0
第五条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <style type="text/css"> * { margin:0px; padding:0px; } div { height: 400px; width: 240px; background-color: pink; margin: 30px auto; } p { float: left; width: 100px; height: 50px; color: blue; } p.higher { height: 120px; } </style> </head> <body> <div> <p style="background-color: orange;" class="higher">First</p> <p style="background-color: red;">Second</p> <p style="background-color: green;">Third<p> </div> </body></html>
第六条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <style type="text/css"> * { margin:0px; padding:0px; } div { height: 400px; width: 240px; background-color: pink; margin: 30px auto; } p { float: left; height: 50px; color: blue; } p.higher { height: 120px; } </style> </head> <body> <div> <p style="background-color: orange;" class="higher">This is First Element</p> <p style="background-color: red;">Second</p> <p style="background-color: green;">Third<p> </div> </body></html>
第七条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><style type="text/css">img.sideline { float: left; margin: 10px -15px 10px 10px; width: 100px; height: 300px;}p.box { border: 1px solid gray; padding: 0.5em; width: 400px; color: red;}p.box span { background-image: url(images/orangePic.png); color:blue;}p.box strong { border: 3px double black; background: silver; padding: 2px;}p.box2 { border: 1px green solid; background: silver url(images/orangePic.png) no-repeat;}h2#jump-up { margin-top: -15px; background: silver;}</style></head><body> <img src="images/sky2.png" class="sideline"> <p class="box"> <span>This paragraph</span>, unremarkable in most ways, does contain an inline element. This inline contains some <strong>strongly emphasized text, which is so marked to make an important point</strong>. The rest of the element's content is normal anonymous inline content. </p> <p class="box2">This is a second paragraph. There's nothing remarkable about it, really. Please move along.</p> <h2 id="jump-up">A Heading!</h2></body></html>
第八条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <style type="text/css"> * { margin:0px; padding:0px; } div { height: 400px; width: 240px; background-color: pink; margin: 30px auto; } p { float: left; height: 50px; color: blue; width: 200px; height: 50px; } p.larger { float: right; height: 350px; width: 200px; } </style> </head> <body> <div> <p style="background-color: orange;" class="larger">This is First Element</p> <p style="background-color: red;">Second</p> </div> </body></html>
第九条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><style type="text/css">div { width: 100px; height: 50px; margin: 10px;}div#div0 { background-color: silver;}div#div1 { background-color: pink;}div#div2 { background-color: orange; float: left;}div#div3 { background-color: green; clear: left;}</style></head><body> <div id="div0"></div> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div></body></html>
第十条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <style type="text/css"> * { margin:0px; padding:0px; } div { height: 400px; width: 360px; background-color: pink; margin: 30px auto; } p { float: left; width: 100px; height: 50px; color: blue; } p.first { height: 120px; } p.third { margin-top: -20px; } </style> </head> <body> <div> <p style="background-color: orange;" class="first">First</p> <p style="background-color: green;">Second</p> <p style="background-color: red;" class="third">Third</p> </div> </body></html>
第十一条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <style type="text/css"> * { margin:0px; padding:0px; } div { height: 400px; width: 360px; background-color: pink; margin: 30px auto; } p { float: left; width: 200px; height: 200px; color: blue; margin-left: -20px; margin-top: -20px; } </style> </head> <body> <div> <p style="background-color: orange;" class="first">First</p> </div> </body></html>
第十三条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <style type="text/css"> * { margin:0px; padding:0px; } div#outer { height: 650px; width: 360px; background-color: pink; margin: 30px auto; /*overflow: hidden;*/ } div#first { float: left; width: 500px; height: 150px; color: blue; background-color: red; } div#second { float: right; width: 500px; height: 150px; color: blue; background-color: green; } div#third { clear: both; width: 500px; height: 150px; color: blue; background-color: orange; } div#fourth { width: 150px; height: 150px; color: blue; background-color: silver; } </style> </head> <body> <div id="outer"> <div id="first">This is First</div> <div id="second">This is Second</div> <div id="third">This is Third</div> <div id="fourth">This is Fourth</div> </div> </body></html>
第十四条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <style type="text/css"> * { margin:0px; padding:0px; } div#outer { float: left;/*Auto expand vertically to contain its children float elements*/ width: 200px; background-color: pink; margin: 30px auto; border: 1px solid green; } div#first { float: left; width: 80px; height: 60px; color: blue; background-color: red; } div#second { float: left; width: 80px; height: 60px; color: blue; background-color: orange; } </style> </head> <body> <div id="outer"> <div id="first">This is First</div> <div id="second">This is Second</div> </div> </body></html>
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
