341day（两栏布局，两个经典Bug，浮动模型）

最新推荐文章于 2022-09-20 20:30:00 发布

原创最新推荐文章于 2022-09-20 20:30:00 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了两栏布局的实现方式，并针对常见的margin塌陷等布局问题提供了解决方案。同时，深入探讨了浮动模型的工作原理及其对页面布局的影响。

《2018年9月9日》【连续341天】

标题：两栏布局，两个经典Bug，浮动模型；
内容：

1.两栏布局：

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>"两栏布局"</title>
	<link rel="stylesheet" type="text/css" href="l6.css">
</head>
<body>
	<div class="right"></div>
	<div class="left"></div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}

.right{
	position: absolute;
	right: 0;
	width: 100px;
	height: 100px;
	background-color: #fcc;
}

.left{
	margin-right: 100px;
	height: 100px;
	background-color: #123;
}

2.两个经典Bug：
a.margin塌陷：通过bfc解决；

b.margin结合；

3.浮动模型：

a. 浮动元素产生了浮动流：：：

所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素；