<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> /* 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，所以想要一行排开的话，解决方案有： 1、行内块元素，相当于文字，中间会有空格，可以把div紧密紧挨。用display：inline-block 2、如果希望元素在页面中水平排列，可以使块元素脱离文档流 使用float来使元素浮动，从而脱离文档流 可选值： none，默认值，元素默认在文档流中排列。 left，元素会立即脱离文档流，向页面的左侧浮动。 right，元素会立即脱离文档流，向页面的右侧浮动。 当一个元素设置浮动以后（float属性是一个非none值） 元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动 元素浮动以后，会尽量向页面的左上或右上浮动，直到遇到父元素的边框或者其他元素。 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐。 */ .box1{ width: 200px; height: 200px; background: red; } .box2{ width: 200px; height: 200px; background: skyblue; } .box3{ width: 200px; height: 200px; background: blue; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background: pink; /*box1向左浮动 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围。 所以我们可以通过设置浮动。 所以我们可以通过浮动来设置文字环绕图片的效果。 */
/*
在文档流中，子元素的宽度默认占父元素的全部
当元素设置浮动以后，会完全脱离文档流，
块元素脱离文档流以后，高度和宽度都被内容撑开。
内联元素脱离文档流以后会变成块元素
*/
float: left; } .p1{ height: 200px; background: deeppink; } </style> </head> <body> <div class="box1"> </div> <p class="p1"></p> </body> </html>