浏览器中如何对网页中的元素进行排版标准流：（文档流 普通流）默认的排版方式垂直排版（块级）和水平排版（行内，行内排版）浮动流：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。 浮动元素的脱标：脱离标准流,元素只要浮动了就脱离标准流，剩下的元素还在标准流里面(第一个元素浮动了第二个元素还未浮动会把占到第一个元素的位置，第二个元素因为浮动前占的是第一个元素的位置浮动后还是找第一行然而第一行被占了所以会跟在第一个元素后面，具体写一段代码运行一下看看)，脱标了就相当于不在浮动流里面一样，前面的元素脱标了后面的没脱标，前面的就会覆盖后面的 浮动规则：相同方向上的先浮动的显示在前面，不同方向上的元素左浮动会找左浮动，右浮动会找右浮动 浮动元素浮动后的内容由浮动元素浮动之前在标准流的位置确定(浮动元素不会覆盖浮动元素) 浮动元素靠贴现象：按照顺序浮动贴靠，如果最后一个元素宽高超出了父元素的宽高；则该元素贴向倒数第三个元素贴，如果还超出就继续找前面的元素贴，直到找到父元素还不能完整显示，没办法就只能这样贴 浮动元素的自围现象：浮动元素会盖住没浮动的元素，但是不会覆盖没浮动元素的内容； （自围现象一般用于图文混排！！！） 在标准流中内容的高度撑起了父元素的高度；在浮动流中则不能撑起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页的布局方式</title>
<style>
.box1{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 150px;
height: 150px;
background-color: yellow;
}
.box3{
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box4{
width: 250px;
height: 250px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
原文地址：https://www.cnblogs.com/myErebos/p/8586442.html
时间： 2024-08-08 07:19:33