HTML&CSS基础-浮动
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.块元素在文档中默认垂直排列
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> /** * 块元素在文档流中默认垂直排列，所以这三个div自上至下一次排开 */ .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; } .box3{ width: 200px; height: 200px; background-color: deeppink; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
2>.浏览器打开以上代码渲染结果
二.块元素之间的浮动
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> /** * 块元素在文档流中默认垂直排列，所以这三个div自上至下一次排开，如果希望块元素在页面水平排列，可用使块元素脱离文档流。 * * 使用float来使元素浮动，从而脱离文档流，该属性有以下常用可选值: * none: * 默认值，元素默认在文档流中排列。 * left: * 元素会立即脱离文档流，向页面的左侧浮动。 * right: * 元素会立即脱离文档流，向页面的右侧浮动。 * * 当一个元素设置浮动时(foalt属性是一个非none的值) * 元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动; * 元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其它的浮动元素; * 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素; * 浮动的元素不会超过他上边的兄弟元素，最多一边齐; * */ .box1{ width: 200px; height: 200px; background-color: red; float: right; } .box2{ width: 200px; height: 200px; background-color: yellow; float: right; } .box3{ width: 200px; height: 200px; background-color: deeppink; float: right; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
2>. 浏览器打开以上代码渲染结果
三.div元素浮动不会覆盖文字内容
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> /** * 使用通配符选择器去掉默认样式 */ *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: red; /** * 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可用通过设置浮动来设置文字环绕图片的效果 */ float: left; } .p1{ background-color: yellow; } </style> </head> <body> <div class="box1"></div> <p class="p1"> 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！ </p> </body> </html>
2>.浏览器打开以上代码渲染结果
四.内联元素浮动会变成块元素
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> .box1{ background-color: red; /** * 在文档流中，子元素的默认宽度默认占父元素的全部; * * 当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，高度和宽度都被内容撑开; */ float: left; } .s1{ /** * 开启span的浮动,内联元素脱离文档流以后会变成块元素，即可用设置宽度和高度啦~ */ float: left; width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1">我是一个div标签</div> <span class="s1">我是一个span标签</span> </body> </html>
2>. 浏览器打开以上代码渲染结果
