php与mysql彻底研究_《css设计彻底研究》读书笔记之 float 浮动原理

一、定义

css中有一个float属性，他的属性值：

none : 默认属性，未定义float时，即为none，也就是标准流通常的情况

left : 左浮动，元素会向其父级的左侧靠紧，同时，元素本身的宽度不再伸展，而根据元素内部的内容的宽度来确定

right : 右浮动，元素会身其父级的右侧靠紧，同时，跟左浮动一样，元素本身的宽度不再伸展，而根据元素内部的内容的宽度来确定

二、通过实例看原理

首先，我先了写这样一段代码，用来作为实验用：

css:

1 .wrap{border:1px solid #f00;padding:5px;}

2 .box-1{border:2px dotted #0f0;background:#ccc;}

3 .box-2{border:2px dotted #00f;background:#ccc;}

4 .box-3{border:2px dotted #0ff;background:#ccc;}

5 .text{border:2px dotted #000;background:#eee;}

html:

1

2 box-1