HTML学习笔记（7）-浮动

1. 浮动

在以前的网页中对页面布局需要用到浮动相关的知识点。

1.2 标准文档流

一个网页由N个html标签组成。每个标签都具有其默认的样式及特性。
大多数的标签都是由块级元素和内联元素组成。
块元素独占一行显示，能够设置其宽高、盒子模型等相关属性,块元素的宽度默认继承父级容器宽度的100%。
内联元素默认横向排列，如果父级容器的宽度不足时才会换行显示。内联元素的宽高为auto * auto;

浏览器根据标签的特性按照从上到下，从左往右的顺序依次解析并渲染html网页，最终呈现出页面效果。

这种默认的解析方式成为浏览器的标准文档流。

通过css属性display能够修改元素的行为。
块元素的display默认为block，内联元素的display默认为inline。

通过css也能够实现对页面的布局。

通过display:inline-block使元素成为内联块元素。使元素同时具备了块元素及内联元素的特点。

也可以通过float浮动实现对页面元素的布局操作。

1.3 float

页面中的元素通过float属性能够实现浮动的效果。浮动之后的元素会脱离标准文档流。其无法继承到父级元素中的某些css属性。
浮动之后的元素按照从左往右的方向依次排列。

float属性具有三个值：left,right,none;
left：左浮动，使元素脱离文档流后靠左排列显示
right：右浮动，使元素脱离文档流后靠右显示
none:没有浮动，默认值

利用浮动的特性，能够对页面中的元素进行横向排列的布局。

  float:left;
  float:right;

1.4 浮动之后的元素父级容器高度塌陷的问题

浮动的元素会脱离文档流，如果一个父级容器中的所有子元素都浮动了，则父级容器的高度会出现塌陷的问题。

通过清除浮动解决父级容器高度塌陷的问题。

clear属性实现清除浮动，其有三个值，left,right,both。
clear:left清除左浮动
clear:right清除右浮动
clear:both同时清除左右两端的浮动

.clearfix{
  overflow:hidden;
  *zoom:1;  /*解决IE浏览器兼容问题*/
}

/*伪元素*/
.clearfix::after{
  content:'';

  /*设置css样式，清除浮动*/
  display:block; /*伪元素默认为内联元素*/
  clear:both;
}

1.5 溢出处理

当一个盒子中的内容超出了容器时，所做的处理方式通过overflow实现。绝大多数情况下使用overflow:hidden对内容进行裁剪。