CSS Float布局过程与老生常谈的三栏布局
5星 · 超过95%的资源 118 浏览量
2020-12-08
20:47:11
上传
评论
收藏 432KB PDF 举报 
CSS Float布局过程与老生常谈的三栏布局布局过程与老生常谈的三栏布局
使用CSS布局网页，那是前端的基本功了，什么两栏布局，三栏布局，那也是前端面试的基本题了。一般来说，可以使用
CSSposition属性进行布局，或者使用CSSfloat属性布局。前者适合布局首页，因为首页上的内容往往可以完全控制。后者适
合布局模板，模板中填充的内容你没法控制——比如，在编辑wordpress模板时，你肯定没法考虑每篇博文的长度。这篇博
文，就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。
那就来老生常谈一次吧，CSS之Float布局。
DIV的特点的特点
布局的基本HTML元素div，有这么几个特点，会影响到后面进行的布局。注意，下面的特点仅适用于没有指定width属性和
height属性的div，因为在用float进行布局的过程中，我们只有在特定的位置（后面会详述）才这么做。
•空的div是没有高度的。
•有内容的div其高度取决于内容的高度。
•如果没有指定float属性，div的宽度将和占满父元素的宽度（不管是不是空的）。
•如果指定了float属性，div的宽度将取决于内部元素的宽度（所以，空的div指定了float属性后既没有高度也没有宽度）。
网上的很多教程，经常指定了div的宽度或高度，然后讲解float属性，这对我学习布局确实产生了很大干扰。记住，只有在特
定的位置，我们才会指定div的宽度。
Float布局的过程
在实践过程中，我领悟到一点，那就是，div是按照在HTML文档中的顺序进行渲染的。也就是说，我们先决定前一个div在页
面上的位置，然后再决定后一个div的位置。也许这一点是显而易见的，但它确实是理解Float布局的关键，网上其他教程里很
少有提及。
有下面这样的有下面这样的HTML文档文档
复制代码代码如下:
<!DOCTYPE>
<html>
<head>
<style type=”text/css”>
#header{background-color: gray;}
#content{background-color: red;}
#sidebar{background-color: blue;}
#sidebar2{background-color: green;}
#footer{background-color: yellow;}
</style>
</head>
<body>
<div id=”page”>
<div id=”header”><h1>这里是标题</h1></div>
<div id=”sidebar”>
<p>侧边栏</p>
</div>
<div id=”sidebar2″>
<p>侧边栏2：地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐
标的过程。因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总
结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务
实的阅读材料。</p>
</div>
<div id=”content”>
<p>这里是一些文字</P>
<p>再来一大段文字</P>
<p>地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐标的过程。
因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总结。如果你
之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务实的阅读材
料。</p>
</div>
<div id=”footer”><p>没人关注的页脚</P></div>
</div>
</body>
</html>
一共5个div，为了使这些div具有高度和宽度，向其中添加了一些文字。现在还没有任何float属性，所以每个div都占满了整个
父元素的宽度，而高度由其中的内容决定。渲染效果如下：
评论10