三列固定宽度布局和Float属性深入剖析

最新推荐文章于 2025-05-15 17:23:59 发布

原创最新推荐文章于 2025-05-15 17:23:59 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了使用CSS的float属性实现三栏固定宽度布局的方法，并通过实例解释了浮动属性的工作原理及不同元素间的排列顺序对布局的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看下源代码和实现的效果图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin:0; }
#main { margin:0 auto; width:500px; }
#main_left { width:150px; height:300px; background-color:#F03; float:left; }
#main_right { width:180px; height:300px; background-color:#39C; float:right; }
#main_middle { margin-left:150px; margin-right:180px; height:300px; background-color:#CF0; }
</style>
<title>三列固定宽度布局</title>
</head>

<body>
<div id="main">
  <div id="main_left">左边</div>
  <div id="main_right">右边</div>
  <div id="main_middle">主要内容</div><!-- 自适应的DIV一定要放在浮动DIV后面 -->
</div>
</body>
</html>

然后起初没有深刻理解float属性，没有注意三个div的排列顺序，代码和效果如下：

<div id="main">
  <div id="main_left">左边</div>
  <div id="main_middle">主要内容</div>
  <div id="main_right">右边</div>
</div>

找了半天没找到原因，最后还是问题出在没理解float属性。

xhtml中包含两种元素：块级元素（如div、p、h、列表、table、form、body）和内联元素（如span、a、img、input）

块级元素：就是一个方块，像段落一样，默认占据一行出现；

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一句话：浮动就是个带有方位的display:inline-block属性，而inline-block是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

这样就能解释为什么蓝色块会掉下来了，红块采用的是float，黄块紧随其后，被显示在同一行，而黄色默认的float:none，即不带有float属性，作为块级元素，蓝块就会换行。