通过浮动可以使一个元素向其父元素的左侧或右侧移动，我们使用float属性来设置于元素的浮动
注意,元素设置浮动以后，水平布局的等式便不需要强制成立 。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
（2）设置浮动以后元素会向父元素的左侧或右侧移动，
（3）浮动元素默认不会从父元素中移出
（4）浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
（5）如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
（6）浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
实际上，浮动属性一开始创建出来的原因就是为了实现文字环绕的效果的，只是后来大家发现利用浮动可以很好地处理页面布局的问题，所以现在更多时候是利用它来做布局的功能。。。
我们知道，块元素和行内元素在文档流中都有着各自的布局特点，比如块元素独占一行等。那么如果脱离了文档流，块元素和行内元素分别会有什么样的影响呢？
1、块元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开
1、行内元素脱高文档流以后会变成块元素，特点和块元素一样
也就是说，一旦脱离文档流以后，我们就不需要再区分块和行内了。
我们可以看一下下面的案例，在没有使用 clear 属性前，对于两个兄弟元素，如果前者设置为浮动，那么由于其脱离了文档流，那么后者就会移动到前者原先的位置上。如果我们不想元素受到其他元素的浮动影响，那么就可以通过设置 clear 属性来解决这个问题。
clear底层实现的原理是：设置清除浮动以后，浏览器会自动为元素添加一个margin，以使其位置不受其他元素的影响
我们可以看下面这个案例，父 div 元素中包含着一个设置为浮动的 div 子元素，由于子元素设置为浮动，脱离了文档流，且父元素中没有指定高度，所以此时一旦子元素脱离了文档流后，就缺少了支撑起父元素高度的元素。相比于这样的效果，我们更希望即使子元素设置为浮动，但父元素依然可以包裹住子元素（或者说是有着子元素的高度，不至于塌陷）。
BFC(Block Formatting Context)块级格式化环境
BFC是一个css中的一个隐含的属性， 当元素开启BFC后，该元素会变成一个独立的布局区域 。可以理解为，此时元素内的后代元素不会再把其他样式传递到外面了。
元素开启BFC后的特点
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC
1、设置元素的浮动（不推荐)
2、将元素设置为行内块元素(不推荐)
需要注意的是，虽然开启元素的BFC环境可以解决高度塌陷的问题，但是这还不是最完美的解决方案，在某些特殊的环境下还是会有问题。
我们回顾一下，高度塌陷产生的原因是什么？主要是因为父元素没有设置高度，所以父元素的高度由子元素的高度决定，一旦子元素设置为浮动后脱离了文档流，那么此时父元素就会由于没有子元素的支撑而塌陷。
那么如果我们能够实现，手动在浮动的子元素后面放入一个无内容的块元素，且清除其受到的 float 影响，那么此时这个块元素就会落在浮动的元素下方，又由于（自身没有设置高度的）父元素的高度由子元素的高度决定，所以此时父元素因为要包裹新增的无内容块元素，也就自然可以包裹浮动的元素了。
所谓的clearfix样式，其实核心就是在第二种解决方式的基础上，对样式做一个进一步的封装，使其既可以解决高度塌陷的问题，还可以解决父子元素外边距重叠的问题。
特点:自动成一行，宽度为100%,可设置宽高。
常用块级元素：
常用行内元素：
class="定义样式名称"
id="定义样式名称"
href="超链接地址"
name="用锚定义一个标签"，通过href链接跳到指定的标签
src="图片的地址"
title="鼠标移上去显示的提示文字"
alt="当图片不显示时，显示的文字"
sytle="书写css样式"
type="定义input类型"
指元素的外边距、边框、内边距，内容大小
文本对齐
float元素对齐/* */
html和css的元素、属性、样式有很多，这里这里只罗列了一些经常用到的知识点，更详细的可以查看参考文档。
清除浮动
在使用浮动的时候会经常遇到一个古怪的事情，就是 对图片运用float属性，但是图片比包含该图片的元素还高，所以图片就溢出到了外面，解决方法是：清除浮动，一个简单的解决方案是，对这个容器（包含图片的父容器）设置{overflow:autozoom:1}
inline-block布局可以使用inline-block布局，但要注意一些事情。(1)vertical-align属性会影响到inline-block元素，你可能会把它的值设置为top；(2)需要设置每一列的宽度；(3)如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
盒子模型 有两种很重要的盒子模型，分别是ie盒子模型和w3c盒子模型。w3c盒子模型是标准的盒子模型，范围包括margin,border,padding,content.并且content部分不包括其他；IE盒子模型范围包括margin,border,padding,content，但是ie盒子模型的content部分包含了border和padding
box-sizingbox-sizing的CSS属性是用来改变默认的css框模型，用于计算元素的宽度和高度，它可以使用这个属性来模拟浏览器的行为不正确支持css模型的规范。box-sizing的属性的默认取值是content-box，测量width和height属性只包括content，但不是border,padding,margin；padding-box的width和height属性包括content和padding的大小，不包括border和margin；border-box的width和height属性包括padding和border，但不是margin。
position有四个属性值：static relative absolute fixed。static是position属性的默认值，即按文档流顺序排列下去；relative将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，如果不设置relative属性，元素的位置按照正常的文档流；absolute是按照元素的父级对象（父元素，祖父元素，曾祖父元素等等）设置的Position属性，只要不是static，的那个元素进行定位；fixed属性总是以body为定位对象的，按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。与background-attachment:fixed相似
