CSS浮动

DIV设置
1、DIV是层叠样式表中的定位技术,全称:DIVision
2、有时候姜div称为"图层",更多称为"块",称为容器

DIV的样式设置
1、div大小,背景设置
2、div溢出效果演示,换行,滚动条显示
3、div边框,轮廓设置
4、盒子模型

DIV溢出处理效果
1、超出div宽度和高度的文字或者图片进行隐藏处理
2、超出div宽度和高度的文字或者图片增加滚动条

CSS轮廓 – outline
作用:绘制与元素周围的一条线,位于边框外缘的外围,可起到突出元素的作用

CSS边框 – border
作用:设置div边框的边线宽度,颜色,虚线,实线等样式css属性
1、border-left border-right border-top border-bottom
2、例如:
border-bottom
(1)solid 设置下边框为实线
(2)none 无
(3)double 双线边框

行内元素和块状元素的相互转换
定位机制
(标准)文档流,脱标流(脱离标准文档流 – float、position:absolute)
文档流:
1、空白折叠现象
2、高矮不齐,底边对齐
3、自动换行,一行写满,换行写

浮动–float
属性设置
1.left
2.right
3.none

float包裹和崩塌
崩塌也可以叫做:崩溃、破坏、崩塌:父一级的块状元素的高度发生了破坏;
知识点:在没设定宽度之前,宽度是上一级父元素的宽度(沾满一整行),高度随内容而撑开,设定宽度

清除浮动 – 为什么清除浮动

  1. 为了父元素不会出现“高度崩塌”
  2. 如果强制规定外层容器的尺寸,则会显得不那么灵活,高度不能自动适应了
  3. 从某个元素开始,不会在需要浮动效果了
  4. CSS浮动