前言 　　为了更好理解浮动和position，建议先看看我写的这篇文章《Html文档流和文档对象模型DOM理解》 正文 　　一、浮动 　　CSS设计float属性的主要目的，是为了实现文本绕排图片的效果。然而，这个属性居然也成了创建多栏布局最简单的方式。 　　如何浮动一个元素？先设定 ...

一、浮动（float） 1、CSS布局的三种机制 （1）网页布局的核心——就是用CSS来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位 ①普通流（标准流） ●块级元素会独占一行，从上到下顺序排列； 　　○常用元素：div、hr、p、h1~h6 ...

网页在解析时，遵循从上向下，从左向右的顺序。 1、从上至上，从左至右的布局。 2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。 浮动 浮动的框可以向左或向右移动 直到它的外边缘碰到包含框或另一个浮动框的边框停止为止 会使元素向左或向右移动，其周围 ...

二、定位（position） 　　初始状态 　　1、相对浮动特点（relative）： ...

HTML(浮动、定位(float、position)) float属性 定义：元素在那个反向浮动。以往这个属性总用于图像，是文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽 ...

浮动很好用，但是用浮动后，当浮动元素的父级元素没有高度时，就会造成高度塌陷，从而影响布局。下面就从一开接触前端时，渐渐发现解决高度塌陷的问题的方式。 一、给浮动元素的父级元素添加固定的高度css【height:200px】 　　 很多时候就是不想把如下布局中的父极元素的高度定死，讲究 ...

前言 　　在自己建站的过程中，要实现一个div随滚动条浮动的效果，网上找了些示例不太好用，还是自己动手，丰衣足食，写的不好请大家谅解，毕竟我不是搞前端的，因为自己建站毕竟每一步都必须自己来，这边只是做个记录。 position:fixed 　　实现浮动主要有个css属性：position ...

语法： position：static （静态定位） | absolute （绝对定位） | fixed （固定定位） | relative （相对定位） 属性参数： static：静态定位，无特殊定位，对象遵循HTML定位规则（html的默认状态） absolute：绝对定位 ...