一、文档流

  网页默认的定位方式

    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:;
}
.clearFloat(zoom:1);

定位

  position :  absolute relatave fixed static(默认)

  偏移属性  top  bottom  left  right

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

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

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

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

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

    

  

CSS(四)float 定位的更多相关文章

  1. (转)CSS+DIV float 定位

    来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...

  2. CSS四种定位及应用

    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...

  3. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  4. css四种定位

    概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...

  5. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  6. HTML和CSS高级指南——定位详解

    本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...

  7. CSS 布局Float 【0】

    float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...

  8. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  9. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  10. CSS中的定位机制

    CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...

随机推荐

  1. MyBatis_关联关系查询

    一.关联查询 当查询的内容涉及到具有关联关系的多个表时,就需要使用关联查询.根据表与表间的关联关系的不同.关联查询分为四种: 一对一关联查询: 一对多关联查询: 多对一关联查询: 多对多关联查询: 二 ...

  2. 在Visual Studio Code中开发Office Add-in

    作者:陈希章 发表于 2017年7月13日 上一篇 我介绍了如何在Visual Studio中开发Office Add-in,因为有标准的项目模板,一系列配套的工具,尤其是自带的一键调试功能,可以让开 ...

  3. C#中的GET和SET访问器

    我们在学习C#语法的属性时,都要首先和GET,SET访问器打交道,从英文的字面意思上理解,GET应该就是获得什么什么,而SET应该是设置什么什么,那我们看一下,官方是怎么定义这对访问器的:get是读取 ...

  4. Less is exponentially more

    Less is exponentially more  (原文出处:rob pike 博客,https://commandcenter.blogspot.jp/2012/06/less-is-expo ...

  5. centos7 卸载home 扩大root空间

    =============================================== 2017/11/1_第1次修改                       ccb_warlock == ...

  6. Nodejs使用redis

    安装方法 安装redis方法请自行百度, 用npm方法,安装nodejs的redis模块 npm install redis 实战 var redis = require("redis&qu ...

  7. .bashrc:16: command not found: shopt配置环境变量时出错

    source .bashrc ------------------------------------------------------- .bashrc:: command not found: ...

  8. ORA-00600[17059]错误

    ORA-00600[17059] ORA-00600[17059]错误大部分都是因为高版本导致,对于本库的分析:因为该库的 shared pool老化比较频繁,到我介入的时候,发现相关该类此sql已经 ...

  9. NPOI 2.0 教程

    NPOI2.0帮助官方地址 目录 1. 前言 1.1 NPOI 2.0与NPOI 1.x的区别 1.2 NPOI 2.0模块简介 1.3 自动识别并打开Excel 2003和Excel 2007文件 ...

  10. Python day 6(5) Python 函数式编程3

    一:装饰器 1 函数对象有一个__name__属性,可以拿到函数的名字 >>> def now(): ... print('2015-3-25') ... >>> ...