操作系统：win10专业版64位
网页编辑器：editplus5
演示浏览器：edge浏览器
假如我们要进行一个基本的网页布局，首先我们要提前进行一个规划方案，比如页面的整体构成是什么样的。假设我要按照草图中所示的样式进行布局。
第一步：首先我们先通过网页编辑器软件进行新建一个html文档或者打开已有的一个网页文档。
第二步：从草图中我们可以看到该网页的框架组成最少需要四个div标签。我们先设置第一个顶部的div标签及为其设置相应的CSS样式。为其设置id为header。
第三步：为其设置css样式：因为设置的是id，所以在样式中必须写上”#“号开头，后面跟上id名称，这样就通过css定位到对应id名称的标签了。
第四步：此时我们在浏览器中可以看到所设置的id名称为header的div标签的显示效果了。
第五步：接下来写中间的两个div标签和样式。
#left{ width:40%;height:400px; background:#cc0033;} #right{ width:40%;height:400px; background:#00cc33;}但是此时我们发现中间的两个div标签没有在同一行显示，而是一个div显示一行。第七步：为了让这两个div标签显示在同一行，我们需要设置float样式。float通常用的有两种属性，既float：left，向左浮动；float：rigth,向右浮动。#left{ width:40%;height:400px; background:#cc0033;float:left;} #right{ width:40%;height:400px; background:#00cc33; float:left;}设置浮动后，就可以看到两个div标签显示在同一行了。
第八步：编写最后一个div标签和样式。
#footer{width:100%;height:100px; background:#009900;}此时在浏览器中查看效果发现最后一个div标签跑到上边去了。第九步：我们看到所设置的最后一个div标签跑到上边去了。原因就是我们给中间的两个div标签设置了浮动float样式，设置浮动样式后就会脱离原来的文档流，导致最后一个div标签紧挨着第一个div标签。为此我们需要个给最后一个div标签设置清除浮动样式。clear:both,既清除该div标签两边的浮动带来的影响。
第十步：此时我们在浏览器中进行查看就会发现显示正常了。
总结：1、首先根据页面的布局草图进行div标签的和css样式的编写2、div和css布局时用的最多的就是浮动flota样式属性3、div标签通过css样式可以呈现出不同的样式效果4、一般是通过设置div标签的id或者classs属性进行定位