一、抛一块问题砖（display： block）先看现象：分析HTML代码结构：<p class="outer"><p class="p1">1</p><p class="p2">2</p><p class="p3">3</p> </p>分析CSS代码样式：.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .p1{width: 80px;height: 80px;background: red;float: left;} .p2{width: 80px;height: 80px;background: blue;float: left;} .p3{width: 80px;height: 80px...
首先要知道，p是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。可以看出，即使p1的宽度很小，页面中一行可以容下p1和p2，p2也不会排在p1后边，因为p元素是块级，独占一行的。注意，以上这些理论，是指标准流中的p。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个p元素”。浮动可以理解为让某个p元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次，所以叫float。如，假设上图中的p2浮动，那么...
http://colobu.com/2014/08/28/CSS-display-float-clear-overflow-visibility/display属性:block/inline/nonedisplay：block(作用是把行属性标签显示成块属性标签，可以设置宽高) ；display：inline(作用是把块属性标签显示成行属性标签，这时块属性标签就不能设置宽高啦)；display：none(作用是使所控制的标签不显示)visibility：hidden(是设置元素的框的不可见，但是在布局中的位置是不变的)它和display：none的区别就在于后者不...
对于开发人员来说，float浮动是需要经常使用的，基本离不开它，却常常忍受着它给你带来的种种痛苦，也许你觉得它就那么一点儿知识，但是你真的能驾驭它么？css float浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。浮动可以理解为让某个DIV元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。本章节就来聊聊 float浮动的使用方法。可以先学习Gxl网相关的免费课程1. 学习《CSS 在线手册...
教程开始： 首先要知道，p是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： 可以看出，即使p1的宽度很小，页面中一行可以容下p1和p2，p2也不会排在p1后边，因为p元素是独占一行的。 注意，以上这些理论，是指标准流中的p。 小菜认为，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个p元素”。 显然标准流已经无法满足需求，这就要用到浮动。 ...
对于web前端开发人员，你对float一定不会陌生。你离不开它，却常常忍受着它给你带来的种种痛苦，也许你觉得它就那么一点儿知识，但是你真的能驾驭它么？如此熟悉的它，却常常变得让你不认识，显得那么陌生，以至于你觉得它丧心病狂到令人发指的地步。今天，年轻的大叔带你来重新认识一下这个熟悉的陌生朋友吧。float最初的设计初衷，是为了实现图文混排效果，让文字环绕图片。如今的用法基本上都是为了实现横向排版，虽然是一种“误...
css多个div float并排，高度都自适应（自增）采用 Div + CSS 进行三列或二列布局时，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同。方法一：纯css解决办法（“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法）：<style type="text/css"> <!-- #wrap{overflow:hidden;} #sidebar_left,#sidebar_right{padding-bo...
float大概是css3以前网页布局里最常用的一个属性了，经常看到一言不合就浮动的代码，就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧。本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展用法。该视频初读很枯燥，认真读后会发现更枯燥。。。。。。不过遇到坑之后再去读就会发现良心视频，字字珠玑。闲话不多说，现在开始：1.float的起源 浮动最初的设计是用来做文字的环绕效果的，这也是设计者想让我们做的东西。2.f...
抛弃那些没用的方法，只记住最实用的一种方法即可！给要清除浮动的父元素多加一个class属性：clearfix！！！样式如下：.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }为了兼容ie6,ie7（现在的项目几乎已经完全不考虑）.clearfix{zoom:1}清除浮动就是这么简单，可以作为公共样式common.css，每个页面都可以直接调用！简单的...
前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的学习，在此把学习心得分享给大家。浮动的基础知识浮动有4个属性：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承）。浮动元素的包含块是其最近的块级祖先元素。浮动元素会左偏移（或右偏移），直到它的外边界接触到『包含块的内边界』或『另一个浮动元素的外边...
关于float很早就接触了，下面结合一个小demo谈谈。1:在页面布局中，假设有两个p，需求是两个p在同一排上；其中解决办法之一就是利用浮动，eg:<li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC dashed;"><p class="g-position_a">职位简介</p><p class="g-position_b"><dl class="g-position_list fl"><dd>职位名称：php工程师</dd><dd>工作经验：1-3年</dd><dd>招聘人数：10人</dd><dd>最低学历：不限</dd><...
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块表现得就像浮动框不存在一样。float效果展示基本设置在网页中正常添加3个p色块:HTML代码:<p class="p1">p1 </p> <p class="p2">p2 </p> <p class="p3">p3 </p>简单设置一些大小和颜色：CSS代码:.p1 { width: 100px; height: 100px; background-color: cyan; } .p2 { ...
CSS浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7以下无特殊说明均指 windows 平台的 IE浏览器 浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？CSS为何要清除...
有3个属性和布局以及box的创建有关：display, position 和 float，彼此交互作用如下：如果display值为none，则position 和 float无作用。这种情况下，不生成box。否则，如果position值为absolute 或 fixed, box被绝对定位，float的计算值为none，而display的值按下表设定。box的位置将由top, right, bottom 和 left 属性及其包容块所确定。否则，如果float的值不是none, box是浮动的并且display的值按下表设定。否则，如果元素为根...
display 用来设置元素的显示方式display : block | none | inline | inline-blockinline：指定对象为内联元素block：指定对象为块元素inline-block：指定对象为内联块元素none：隐藏对象float 控制元素是否浮动显示float : none | left | rightnone：设置对象不浮动left：设置对象浮在左边right：设置对象浮在右边浮动的目的：就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性1.任...