一、文档流

  网页默认的定位方式

    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 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  2. 你为什么还坚持.NET

    C#换什么比较合适? 从TIOBE来看,Java.C++.C.Python都好,对了,还不能忘了JS. Sql Server换什么比较合适? MySql挺好,Oracle也不错,也还有不少选择. 都挺 ...

  3. gunicorn Arbiter 源码解析

    如前文所述,Arbiter是gunicorn master进程的核心.Arbiter主要负责管理worker进程,包括启动.监控.杀掉Worker进程:同时,Arbiter在某些信号发生的时候还可以热 ...

  4. solr6.5搭建以及使用经验

    首先搭建环境为Linux 6.5 64位  jdk1.7 将webapp目录复制到tomcat下的webapps目录下 可以修改文件夹名为solr(这个自己随意定义,项目名而已) 在tomcat目录下 ...

  5. 基于 HTML5 WebGL 的 3D 服务器与客户端的通信

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...

  6. Photoshop 无法打开某些JPEG文件的成因

    最近想把QQ相册里的一些照片整理修复一下,所以下载了一些到本地,然后用PS CC 2018打开,结果PS告诉我"无法完成请求,因为程序错误".试了Win10系统自带的看图软件,能够 ...

  7. ES6函数的拓展

    ES里面现在支持在函数的参数直接给参数赋一个默认值,ES6支持拓展运算符(...)三个英文的点,这个形式如function(...a)这个里面...a可以接受若干的值,这个拓展运算符也可以把若干的值转 ...

  8. iOS 设置视图背景的透明度

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #00afca } span.s1 { color: #fffff ...

  9. JavaWeb框架_Struts2_(五)----->Struts2的标签库

    1.  Struts2的标签库 1.1 Struts2标签库概述 Struts2的标签库可以分为以下3类:用户界面标签.非用户界面标签.AJAX标签; 2.1.1 Struts2标签库的分类和使用 1 ...

  10. Who's in the Middle

    FJ is surveying his herd to find the most average cow. He wants to know how much milk this 'median' ...