千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

浮动

浮动属性 float:

  none 不浮动 默认值 在默认文档流里面

  left 向左浮动

  right 向右浮动

浮动的规则

  1.浮动的元素会半脱离文档流，不占据页面空间，不会遮挡下面的文字图文环绕效果

  2.浮动的元素会在父元素限制的范围内部浮动

  3.浮动的元素会在当前 行框 内部浮动

浮动的问题--高度塌陷

  当父元素的高度靠子元素撑开的时候，子元素全部浮动，导致父元素没有高度

  此刻父元素高度塌陷，后果是浮动布局失败

 解决浮动的问题--清除浮动

  给父元素添加高度 --不推荐 违背了高度自适应

  给父元素添加overflow: hidden; --触发了BFC

.father { width: 800px;

   /* 不写高度 */

   border: 10px solid #000;

   /* 解决1 */

   /* height: 200px; */

   /* 解决2 */

   overflow: hidden; }

  .son {width: 200px;height: 200px;border: 5px solid red;

   /* 设置浮动 */

   float: left;}

浮动的问题--元素类型

  行内元素添加浮动属性之后可以直接设置宽高

  原因:元素添加浮动之后脱离了默认文档流，不再遵从默认文档流的元素类型

  直接原因:元素添加浮动属性之后会产生一个行框

标准盒子模型:

css规定,所有元素都是框,所有元素在页面上都占据了空间

  盒子模型:计算空间(元素实际占地大小)的公式

盒子模型的组成部分：

   content 内容(width+height)；padding 内边距；border 边框（边框会撑大盒子）；margin 外边距

padding(内边距)的特征 padding-方位词(top/right/bottom/left):值；

  1.位于内容content和边框border之间

  2.padding是加给父元素/盒子的，调整子元素/内容的位置

  3.会撑大盒子

  4.背景色会覆盖到padding区域

  5.不支持负值

6.行内元素设置上下的内边距无效

 margin的特征 margin-方位词(top/right/bottom/left):值;

  1.位于边框border之外

  2.margin是添加给元素自身的，调整元素自身的位置或者元素与元素之间的位置

  3.不会撑大盒子

  4.没有颜色

  5.支持负值

外边距溢出问题:父元素里面的第一个子元素添加margin-top,会把父元素带下来

  原因:父元素和子元素共用了margin-top

  解决: 给父元素添加1px的padding-top或者border-top(不推荐)

    给父元素添加overflow:hidden(触发了BFC)

 属性：overflow:决定溢出容器的部分如何显示

属性值:overflow属性要加给容器的

  visible 默认值 显示

   hidden 隐藏

  scroll 强制出现滚动条

  auto 根据内容判断是否出现滚动条