css浮动的原理
程序员文章站
2022-04-28 16:36:33
...
一、浮动与绝对定位的相同之处:
1. 浮动元素也脱离了文档流
2. 元素浮动之后都支持了宽高,变成了块元素,
二、浮动的特点:只能沿着水平方向进行;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>5.浮动的原理</title> <style> .box1 { width:200px; height: 200px; background-color: lightskyblue; /*设置左浮动*/ /*下面绿色块看不到了,因为浮动元素脱离了文档流,绿色自动上移占据了原来蓝色块的位置*/ /*如果想看到绿色块,只要将绿色块宽高调整大一点就可以*/ /*float:left;*/ } .box2 { width:200px; /*width:250px;*/ height: 200px; /*height: 250px;*/ background-color: lightgreen; /* 如果第二个色块也浮动的话:它会紧贴着第一个浮动的元素,这是为什么呢? 因为第二个色块也脱离了文档流,与第一个是在同一个平面中,这点对排版很重要 */ float:left; } .box3 { width:200px; height: 200px; background-color: lightcoral; /*珊瑚色*/ /*下面浮动第三个色块*/ /*float:left;*/ /*浮动还可以向右进行,它会一直向右侧移动,直到碰到窗口最右侧停止*/ /*float:right;*/ } .text { width: 100px; height: 100px; background-color: yellow; /*将行内元素进行浮动后,将会脱离文档流,从而使其支持宽高设置*/ /*float:left;*/ } </style> </head> <body> <div></div> <div></div> <div></div> <!-- <span>是行内元素,它的宽高由内部文本决定,不支持用户自定义宽高设置的--> <!-- <span></span> --> <!-- 总结:浮动使元素脱离了文档流,同时使行内元素也支持了宽高,表现出与块级元素一样的特征 --> </body> </html>
以上就是css浮动的原理的详细内容,更多请关注其它相关文章!
上一篇: 改写一个简单的菜单 弹性大小_导航菜单
下一篇: str python是什么意思
推荐阅读
-
【译】女程序员的正能量_html/css_WEB-ITnose
-
如何利用html和css来实现注册表单的简单实例
-
对position属性的总结_html/css_WEB-ITnose
-
使用 CSS & jQuery 制作一款漂亮的多彩时钟_html/css_WEB-ITnose
-
史上最全的css hack(ie6-9,firefox,chrome,opera,safari)_html/css_WEB-ITnose
-
刚学extjs 导入文件的时候 一直报错 求大神解决_html/css_WEB-ITnose
-
谈谈一些有趣的CSS题目(七)-- 消失的边界线问题
-
为何js文件后面加一个参数?这样就会自动刷新本地js文件的缓存了么?_html/css_WEB-ITnose
-
CSS:你未必知道的@规则_html/css_WEB-ITnose
-
虚拟键盘,移动web开发的痛_html/css_WEB-ITnose