css浮动

一、DIV简介：

1、什么是div:是层叠样式表中的定位技术： DIVision

2、作用：将代码分块管理，统一进行样式设定。

二、DIV溢出效果：

1、超出div高度宽度的文字或图片进行隐藏处理

2、超出div的高度和宽度自动增加滚动条

三、overflow属性设置

1、visible 默认值，内容不会被修剪，会呈现在元素框之外

2、hidden 超出德邦部分被隐藏

3、scroll 不论是否需要，都会显示滚动条

4、auto 按需显示滚动条方便查看其余的内容

四、设置边框：边框包括：边框、轮廓。

1、css轮廓：outline

绘制于元素周围的一条线，位于边框边缘的外围，起到突出元素的额作用
dashed:虚线轮廓 dotted：点状轮廓 solid实现 double双线

2、css边框：border

border-left border-right border-top border-bottom
实例：border-bottom:solid none double

五、盒子模型

1、盒子模型：用来改变间距的，外边距和内边距。

DIV TABLE BODY等块状元素都可以使用盒子模型的。

2、盒子模型：width height border margin padding

盒子模型主要用来进行页面的布局

3、margin：外边距

（1）margin设定的是对象和对象之间的距离
（2）属性：top　left　right　bottom
　　例：margin:10px 10px 10px 10px;
　　　　　　　　上　右　下　左

4、padding内边距 对象内部

（1）padding设定的是文字与边框的距离
（2）属性：top left right bottom
　　例：padding:10px 10px 10px 10px;
　　　　　　　　　上　右　下　左

５、box-sizing

（1）content-box 保持原状
（2）border-box 处理padding溢出的距离

６、行级元素和块级元素的默认属性

（1）行级元素：行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的。
a标签 label img span等

（2）块级元素：块级元素在默认情况下会独占一行
div h标签 li table等

六、定位机制

1、（标准）文档流

文档流特点：
（1）空白折叠现象
（2）高矮不齐，底边对齐
（3）自动换行，一行写满，换行写

2、脱标流（脱离标准文档流 float position：absolute）

文档流以外的，都是脱标流

七、float属性的设置

1、left 元素向左浮动

2、right 元素向右浮动

3、none 默认值，元素不浮动

八、float的包裹和崩溃效果

1、崩溃：指的是float作为父级元素的时候，父级元素的高度发生了崩溃。

2、崩塌、破坏 都指的是父级元素的高度发生了破坏。

3、注意事项：子元素设置浮动之后，父元素如果不设置高度之后会发生一个崩溃崩塌的效果

九、div浮动代码演示

#div1{
background-color: red;
float: left;
}
img{
vertical-align: bottom;
} 这就是浮动的包裹特性。

十、浮动的其他特性

1、商品的并排显示

2、文字和div进行环绕排列方式

十一、清除浮动

为什么清除浮动：

1、为了父元素不会再出现“高度崩塌”
2、如果强制规定外层容器的尺寸，显得不灵活，高度能够自适应
3、从某个元素，不再需要浮动效果