一、双边距浮动的bug 1.1一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box) 2.1在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离 在ie6或更低版本中产生双倍外边距 修复方法 在浮动元素上添加display:inline属性即 ...
分类：
其他好文 时间：
2017-04-12 03:02:57
阅读次数：
286
float 属性是CSS中非常重要的属性之一，在布局中经常使用到，但它可不像其他属性一样安分，如果对它不够了解，当你使用时或许会出现一点点问题，所以，，，就一起看看吧。 float 浮动 一.浮动元素的性质 1.脱离正常文档流 之所以说浮动元素不像其他大部分属性一样安分，是因为它会使使用了该属性的元 ...
分类：
Web程序 时间：
2017-04-09 00:12:26
阅读次数：
212
初学CSS时，我们学到很多有意思的CSS规则，比如外边距塌陷，还有浮动元素的一些特性等，其实这些规则背后都是BFC这个东西在控制，下面我们来看下BFC到底是什么。什么是BFCBFC（Blockformattingcontexts），翻译过来就是块级格式化上下文，指的是一种上下文环境，我们暂且不管它..
分类：
其他好文 时间：
2017-04-08 23:07:41
阅读次数：
227
上次我们一起研究了css浮动，这次我们一起学习一下浮动对排版造成的影响，以及清除浮动影响的方式。 首先，我们来看一下浮动对合资高度的影响： 在标准流中内容的高度可以撑起盒子的高度： 示例代码： 在浮动流中浮动元素内容的高不可以撑起盒子的高度： 示例代码： 下面我们看下浮动对布局造成的影响： 浮动的盒 ...
分类：
Web程序 时间：
2017-04-04 23:31:50
阅读次数：
340
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #d1{ border:1px; solid:#000; } #d2,#d3,#d4{ width:200px; height:2 ...
分类：
其他好文 时间：
2017-04-04 01:08:04
阅读次数：
199
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素 ...
分类：
Web程序 时间：
2017-03-29 20:55:54
阅读次数：
552
1.浮动法，左列左浮动，右列右浮动，插入主体。中间内容#main必须要在最后加入，#main占一行会影响后面的浮动元素 2.margin负值法，每个盒子都向一边浮动，通过负margin把盒子拉到左侧，先放中间的盒子 3.绝对定位，左右两列绝对定位，中间用margin撑开距离。最容易理解 4.flex ...
分类：
其他好文 时间：
2017-03-29 20:10:26
阅读次数：
145
最常见且最容易发现的额一个bug是IE 6和最低版本中的双外边距浮动bug。这个bug是任何浮动元素上的外边距加倍。 上面代码中，div盒子向左边浮动，设置的margin-left的值是10px。在chrome浏览器，Firefox浏览器中： 在ie6中，距离为20px： 这个bug很容易修复，就是 ...
分类：
其他好文 时间：
2017-03-27 23:03:25
阅读次数：
192
浮动元素父元素高度自适应（高度塌陷） hack1：给父元素添加声明overflow:hidden; hack2: 给父元素加height hack3: 在浮动元素下方添加空div,并给该元素添加 声明：div{clear:both; height:0; overflow:hidden;} hack4 ...
分类：
其他好文 时间：
2017-03-21 22:14:42
阅读次数：
169
1、float:left|right|none|inherit 2、文档流是万张中显示排列时候所占的位置 3、浮动的定义：使元素脱离文档流。按照指定方向移动，遇到父级边界或者相邻的浮动元素停下来 4、clear:left|right|none|inherit;元素的某个方向上不能有浮动元素 cear ...
分类：
其他好文 时间：
2017-03-19 14:02:08
阅读次数：
114
