一、文档流

  网页默认的定位方式

    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. javascript跳跃式前进(3) - 跳入JSON

    前言 JSON崛起不是意外,是顺应时代;相当简洁小巧的书写模式及阅读方式; 基础 看这篇文章: JSON知识点汇总_W3SCHOOL 初步进阶 早期的解析仅仅实用eval() ,可是这货太easy给注 ...

  2. Intellij IDEA安装golang插件

    原文作者:Jianan - qinxiandiqi@foxmail.com 原文地址:http://blog.csdn.net/qinxiandiqi/article/details/50319953 ...

  3. &lt;LeetCode OJ&gt; 58. Length of Last Word

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  4. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  5. redis缓存的安装和配置

    ubantu16.04环境下安装 下载安装,依次执行命令; # 从官方网站下载安装包,注意,当前在哪个目录下执行命令,下载的包将在哪个目录下 $ wget http://download.redis. ...

  6. 第一安装oracle数据库后,需要创建一个用户,给用户解锁并赋予权限

    1.第一次安装oracle数据库应该做的事情. 注: 1.安装oracle后需要创建用户,连接数据库,(注意数据库名,还有好像后面的 ":"也有影响) 2.解锁用户, 3.授予新登 ...

  7. eoLinker 新功能发布,增加了识别代码注释自动生成文档功能

    产品地址:https://www.eolinker.com开源代码:https://www.eolinker.com/#/os/download在线生成代码注释工具:http://tool.eolin ...

  8. Mac环境下实现alias重命名命令(永久生效)

    Mac环境下实现alias重命名命令 iOS Dev在使用Xcode完成代码编写后,可能需要上传至第三方分发应用给测试人员进行相关测试,比如蒲公英.FIR. 效率较高的上传方式是借助于Fastlane ...

  9. 当前时间、前n天、后n天、取前n条记录、从第n条开始取m条

    当前时间:NOW() 前n天:DATE_SUB(NOW(),INTERVAL n DAY) 后n天:DATE_SUB(NOW(),INTERVAL -n DAY) 取前n条记录:SELECT * FR ...

  10. 嵌套查询别名必须性示例。HAVING用法

    HAVING的一个重要作用: SELECT子句有统计函数嵌套时SELECT子句不能出现GROUP BY列,如果需要显示此列可以把嵌套的统计函数写成子查询放在HAVING子句中. 可用HAVING简化语 ...