html让一个盒子往下走代码,web前端学习笔记(CSS盒子的浮动)

在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。

CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。

准备基础代码

浮动的性质比较复杂，这里先制作一个基础的页面，代码如下。后面一系列的实验将基于下面的代码为基础，并根据不同的知识点添加不同的新代码。

body{margin:15px;font-family:Arial;font-size:12px;

}.father{background-color:#ffff99;border:1px solid #111111;padding:5px;

}.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;

}.father p{border:1px dashed #111111;background-color:#ff90ba;

}.son1{

/*这里设置son1的浮动方式*/

}.son2{

/*这里设置son1的浮动方式*/

}.son3{

/*这里设置son1的浮动方式*/

}

Box-1