浮动 float

块级元素与行内元素都转化成行内块？

行内块特点：既可以在一行显示又可以设置宽高

• display:inline-block; 行内块
  • 从左向右排布
  • 基线对齐问题
  • 间隙问题
• float:left/right; 浮动
  • float:left; 左浮动,从左向右排布
  • float:right; 右浮动，从右向左排布
  • 特点：没有基线对齐问题、没有间隙问题

在项目中，float浮动属性常用再块级元素中(div/li)，设置块级元素转成行内块(在一行显示又可以设置宽高)
display:inline-block;一般用在背景图和文字相结合时（结构一般是：一行内某一个小模块中）
<span><em></em>购物车</span> 因为em用来做背景图片，em是行内标签不可以设置宽高，所以需要转成行内块 display:inline-block;

float 浮动的特点

• 脱离文档流（当给子元素设置float属性后，父元素找不到子元素，父元素高度为0），相当于来到了第二层级，平行于默认的文档流
• 所有的标签都可以设置浮动属性，例如:div,li,a,span,img...（无论时块级元素还是行内元素）
• 不设置宽高时，宽高是由内容决定的
• 行内元素与行内块级元素和文字会围绕浮动属性环绕(图文混编)

文档流：块级元素和行内元素默认的排布顺序

清除浮动带来的影响(清除浮动)

影响：当给子元素设置完浮动属性后，父元素找不到子元素了，父元素的高度为0（脱离文档流）

解决方法：

• 给父元素设置一个固定的高度
• 给父元素设置一个css属性 overflow:hidden;
• 给所有设置浮动元素的后面，加一句话<div style="clear:both"></div>
• 利用伪元素来清除浮动带来的影响===>常用
  • 在html页面引入reset.css样式表（有清除浮动的css样式）
  • 当给子元素设置浮动属性后，给父元素加一个class="clear"

.clear:after {
    display: block;
    content: "";
    clear: both;
}
.clear{
    *zoom: 1;/*兼容低版本浏览器*/
}

overflow 文本溢出的处理方式

• overflow:hidden; 溢出隐藏，超出元素的范围，就会把多余的内容隐藏
• overflow:auto; 浏览器会判断内容是否超出这个元素的范围，如果超出则出滚动条
• overflow:scroll; 不管内容是否超出这个元素的范围，都会添加滚动条