相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
在W3CSchool学习web前端时，看完CSS定位-浮动这一节后，感觉没有什么问题。但是在CSS高级-分类这一节的中进行实践时，遇到了如下问题。测试地址：浮动的简单应用。
假定我们需要创建3个div标签，并且将他们的类名分别命名为box1、box2和box3，将box1和box2放在第一行，将box3放在第二行，最常见的方法是分别给box1和box2都加上一个float:left属性，让他们浮动，实现代码如下
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
margine 正常情况下使用 , 设置 float 浮动 , 使得相邻的盒子模型紧贴在一起 ;
几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素的浮动定位展示。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围。不过在 CSS 中，任何元素都可以浮动，假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。 浮动布局主要用于那些图文环绕以及实现一些界面不规则排列的场景，并且浮动定位技术在WEB前端开发中应用的非常普遍。
浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型，并不是二维的。元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表
终于也算是结束了一个项目，对我来说，这是我进TC后的第一个项目。没有什么新鲜感，写出的代码还是一样垃圾，一直自己提倡的东西自己却做不好，不过我相信，现在“丑”只是为了更快的看到进步。OK，牢骚发完，还是说点有用的吧。
float原本是用于“文字环绕元素”的效果，但是，平时我们经常在布局上用float属性。那么，使用float时，需要注意些什么呢？
最近在学前端, 转自沈夕博http://hi.baidu.com/skillshen/
overflow: auto;/* 使用浮动时候结合使用,可以使得容器的宽高自动体现出来 */
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~ 在此之前先为大家显示下前端工程师的路线图: 第九天的笔记:HTML AND CSS: -复习：HTML类： 定义类选择器：.cc{ color=""; } 类选择器引用： -复习：块级元素： :可以用作其他HTML元素的容器，同个类可以设置 多个块级元素。 例： -复习元素：行内元素，可以作为文本的容器，同个类可以设置多个行 内元素。 例：cccccc HTML布局： 多列显示内容：解析： 样式标签 #header {定义头部的
在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果，<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的内容时，浏览器就会自动将焦点转到和该标签相关联的控件上；<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击label标签内的内容，也可以选中对应的单选按钮或复选按钮。
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
之前一直不明白clear的意义何在，一直以为clear就是去掉元素本身都浮动属性（即使元素的float设置为none），如果这样理解就显得clear非常多余。最近再次接触到clear才弄明白clear的本来意义。 下面直接看实例： 1. 没有清除浮动
如果两个元素一个向左浮动，另一个向右浮动，左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。
应用了float属性的元素，就像在印刷布局中，形成文字环绕图片的效果。除此之外，浮动还可以用于创建网页布局
拿到一张设计稿，最先想到的就是如何布局。 垂直布局？水平布局？悬浮？层叠样式？ 今天我们来复习一下CSS原生的布局属性——float。 float 浮动属性。 浮动是指元素悬浮在其他元素的上方，靠左或靠右排列； 浮动元素会避开其他元素的可视内容区域； 浮动元素可以是任何元素类型，可以设置margin来控制浮动元素与其他元素内容之间的距离； 被设置了float的元素无法使用left、top、right、bottom等位置属性（不生效）。 float:left; 元素向左浮动。 当前元素向左向上浮动，非浮动元素
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
块元素： 1、块元素不在独占页面的一行 2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开
HTML5学堂：2015年，IE6已经黯然退市。不过，IE6的兼容问题，个人认为还是应当有所了解的。一方面，前端这个工作，并不能够仅仅了解现在，应当有一个较好的知识沉淀。另一方面，我们几个讲师一直将IE6作为辅助测试的工具-如果子级盒模型大小超出了父级大小，那么在IE6下必然是崩溃的。对于这种低级错误，虽然其他浏览器都能够处理和调整，但是却绝不是一个专业开发人员会犯的~ margin双倍间距bug IE6存在不少的兼容问题，今天要说的是IE6的横向双倍外边距。 触发条件 当浮动元素的浮动方向和浮动边界的方向
本文内容概要： 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布局操作，那本周的这篇文章我们主要与大家分享的是如何去实现我们网页的布局，这也是作为前端的我们需要做的第一个大操作——实现网站的页面布局。本文主要讲解CSS的基本选择器、盒模型、浮动等知识点，并会提供一个布局案例来给大家做参考。 在上周，在文章的最后给大家留了一个网页结构的案例，通过使用讲解的所有标签来书写了一个页面，可是在那个页面里面，我们只能看到最
CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
从业三年，项目无数，现在回过头来，想要把一些重要的知识用白话整理出来：这个东西是什么？怎样才是最佳实践？希望对自己知识体系有梳理作用， 也希望对大家有些许帮助。 前端技术栈更新太快，眼花缭乱，大家一个劲揽过来学习的时候，别忘了回头看看那些已经掌握的基础知识。 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧。 浮动到底是什么？ 浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！ 浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已，
如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为auto即可。
1、用于规定元素哪一侧不允许浮动元素，默认值为none，表示不清除，左右两侧允许浮动元素。
元素的类型分为块级元素和行级元素。 比如div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 可以通过display属性，设置元素的具体表现。比如
css引入伪类和伪元素概念是为了格式化文档树以外的信息。伪类和伪元素是用来修饰不在文档树中的部分。
采用浮动，绿色块左浮，蓝色块右浮，利用浮动特性实现宽度超出另一行显示的效果，并是动态的。
本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果。
CSS的四种引入方式： 一、行内样式 cairui 二、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: blue; color:
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。
[2].浮动布局方式：通过设置html的float属性显示,值：none不浮动、left对象向左浮动，而后面的内容流向对象的右侧、right对象向右浮动，而后面的对象流向对象的左侧(取消独占一行的行为，允许别人与其一行，其实是这个块从文档流中分离出来，他之后的对象视它不存在)
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法。临时就在我经常浏览的网站上抓的相对应的截图。（以后看到其他类型的我再补充）
我们还发现,当鼠标移动到每个商品时,他们的边框都会改变颜色,无疑是使用伪类hover实现的,但是直接使用会发现有新的问题.
在MyLayout的6大布局中，每种布局都有不同的应用场景。且每种布局的子视图的约束机制不一样：线性布局MyLinearLayout、表格布局MyTableLayout、流式布局MyFlowLayout、浮动布局MyFloatLayout这四种布局的子视图之间的约束是通过添加到父布局的先后顺序来决定的；框架布局MyFrameLayout中的子视图则只跟父布局视图有关，而跟添加的先后顺序无关；相对布局中MyRelativeLayout的子视图则是通过设置视图之间的依赖关系来建立约束的，而跟添加的先后顺序无关。即便如此，同一种界面功能在一些情况下都可以用任何一种布局来实现。在这些布局中相对布局因为是通过设定视图之间的依赖来建立一种布局约束，因此我们可以用他来构造一些复杂且无规律的界面布局，但其缺点则是太过于依赖约束，导致当界面调整时需要重新设定视图之间的依赖关系(iOS的AutoLayout其实就是一种相对布局的实现，布局时需要设置太多的约束，这也是我一直诟病AutoLayout的原因)。那么是否可以有一种方法不设置视图之间的依赖而来实现一些复杂的界面布局呢？ 这也就是我们推出浮动布局MyFloatLayout的原因。
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
前端的三剑客指的是 HTML、CSS 和 JavaScript，下面是一些常见的前端三剑客面试题及其答案
标题图 Day9:html和css <head> <meta charset="UTF-8"> <title></title> <meta name="description" content="" /> <meta name="Keywords" content="" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <li
格式化上下文（Formatting Context）指页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
在假期里较系统的学习了html的静态网页制作，但在这过程中出现了一系列问题，比如：如何用盒子模型布局；如何用html和css实现轮播图的效果等；值得我们关注的是很多同学遇到了一个相同的问题，当我们的静态网页在其他PC端显示时，会出现排版混乱等情况，那么该如何解决宽高自适应的问题呢？在我经过几天的接触和学习之后，我对如何解决自适应问题有了初步的认识和经验，在此分享给大家，帮助大家快速了解和学习html。
html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
CSS 大大提高工作效率，可以将 HTML 代码与样式代码分离，让原本 HTML 不能描述的效果，通过 CSS 描述出来。
这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
