CSS(四)float 定位

一、文档流

  网页默认的定位方式

    1.行级元素: 从左到右

    2.块级元素: 从上到下

  文档流的流动方式  从右下 到 左上 ↖

二、浮动

  1、浮动的定义 , 是元素脱离文档流  遇到父级边界 或相邻浮动元素 停止

  2、特点

    a)浮动元素不会超过父元素的边框

    b) 浮动元素默认不会重叠

    c)浮动元素只能左右浮动 不能上下

    d) 浮动了 就变成了  行级块元素

  3.浮动属性

    none  left   right

  4.清除浮动

    clear : left  right  both

清除浮动的方式

  1.在浮动元素下面新建一个 div 给他  添加  clear:both

    讨厌啊  这个根本就不可能这么用的  但是为啥还要往上写啊    。。。谁让当时学的时候  老师也是这么讲的       循序渐进  的会更好一点吧  not worry

  2.利用伪元素

.clearFloat: after {
  display:block;
  clear:both;
  content: '';
  visibility: hidden;
  height: 0;          
}
.clearFloat(zoom:1);

定位

  position :  absolute relatave fixed static(默认)

  偏移属性  top  bottom  left  right

  相对定位  relative 相对于自身 原来的位置      并且 保留原有的位置

  绝对定位  absolute 相对于 最近有定位的父级

  z-index:1  (值越大权重越高)  解决  定位后   堆叠  问题

  固定定位  fixed   相对于视口定位

居中的几个方法方法点我! 我们走

    

  

原文地址:https://www.cnblogs.com/96weibin/p/7875243.html