标准文档流及脱离标准文档流的方法和float浮动用法

1.标准文档流

   浏览器的排版是根据元素的特征（块和行级），从上往下，从左往右排版。这就是标准文档流。

　　浮动 float:left/right;

　　效果:元素都加浮动，后面的元素会紧跟这前面的元素并排排列。

　　A,只要加了float，这个元素就会脱离标准文档流。

　　　　第一个加了float，离了标准文档流，对于浏览器来说，第二个元素就变成了标准文档流中的第一个，于是就会把他排在第一位。而第一个依然存在，所以就会叠加。

 

　　　　行级元素加了float，脱离标准流，块不像块，行不像行，能设置宽高，能并排排列。

　　　　Display就没有任何意义了。

　　B,浮动的元素会紧紧贴靠在一起

　　C,浮动的元素会文字环绕

2.使元素脱离标准流的方法

　　1.        浮动 float

　　2.        绝对定位position:absolute；

　　3.        固定定位position:fixed;    fixed固定的

　　浮动带来的坏处

　　1，给元素加了浮动，撑不起父级的高度了

清除浮动

1.        给浮动的父元素添加高度

2.        给父级添加overflow:hidden;

3.        给浮动元素的后面添加一个空的div 添加样式为clear:both

4.　　给浮动元素的父级添加一个类clearfix

伪类选择器　　

只要选择器后面带:,都可以说他是伪类选择器

 

a:link{}  a:hover{}  a:visited{}  a:active{}  p:after{} p:before{}

a的四个顺序不能改变

 

伪元素和伪类选择器的区别

 

伪元素有两个冒号如p::after{}  伪类选择器有一个冒号p:hover{}

备注
　　Margin：0auto；和text-align：center；
　　Margin居中是对自身  text-align是对元素内部的文本居中的
　　Visibility：hidden；和display：none；
　　Visibility隐藏了之后还占据空间   display隐藏后不占据空间

 

转载于:https://www.cnblogs.com/Shinigami/p/9655933.html