为什么要讲一下DIV+CSS网页布局呢，因为这是一种很常见的基础布局。

使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用，提高了开发效率，同时分离后美工和网站开发人员也可以协同合作，进一步提高了开发效率和整体网站的质量。

先说一下常规的三种布局：

1）常规流式布局

2）浮动布局

3）定位布局

  • 静态定位
  • 相对定位
  • 绝对定位
  • fixed定位

——————————————————

那下面我们逐个解析，第一种常规流式布局，通俗地讲，就是怎么写的怎么排列，该怎么样就怎么样（1、按照html编写顺序排列；2、按照元素特性显示）

这是一种最原始的排列，没学过布局就是用的这种布局方式。

 

那第二种——浮动布局：  使当前元素脱离文档流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动的边缘

使用float可以设置浮动，一旦设置浮动，元素会脱离文档流，在页面上根据实际设置移动

元素浮动后，它将不再在文档流中占据位置，文档流中其它元素自动上移。

 

浮动规则：

  • 当浮动元素遇到父级元素边框时，会停止浮动
  • 当浮动元素遇到其它浮动元素时，会停止移动
  • 当浮动元素遇到没有浮动的块级元素时，也会停止浮动

块级元素设置浮动：1、不再霸道（不再占用一整行）；2、不再固执（开始移动）；3、可以实现文字（图片）环绕；（变成行内块元素）

行内元素设置浮动：1、变成行内块元素，新增块级元素的属性；

注意浮动元素会遮盖未浮动的元素，且可能会对父级元素造成高度坍塌。

假设一个场景a，两个浮级元素同行排列，要想两个浮级元素垂直排列，应在非边缘的浮动元素上使用清除浮动（clear）来实现换行。

抛出疑问：1、非浮动元素可以使用清除浮动吗？ 答案是可以的，这只是一个属性，并非浮动元素的特有属性。

　　　　　2、浮动元素清除浮动后还算不算浮动元素？答案：结合问题1的答案，并非是浮动元素才可清除浮动，那也自然这个问题也不成立。

　　　　　3、为什么要清除浮动？答案是因为要解决高度坍塌问题。

清除浮动推荐方法：1、after伪元素清除浮动；2、before、after双伪元素清除法；

使用伪元素清除浮动的原理：在对应块前后新增一个隐藏的块，并对这个块进行clear：both，已达到清除浮动的效果。

优点：符合闭合浮动的思想，并且不会对渲染增加负担，代码量少，简单易操作。