float 浮动是前端开发css中最常见用于布局的一种属性之一。CSS中float简单来说，就是使元素向左或向右排列， 其周围的元素也会重新排列。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 向左浮动 float ：left； 向右浮动：right； 浮动的一些规则 ...
分类：
其他好文 时间：
2017-09-17 17:26:06
阅读次数：
166
水平方向－三栏布局 1.浮动布局 简介：左边固定宽度后左浮动，右边固定宽度后右浮动 但是，这种布局方式有个缺点：当中间的内容很多时，将会出现“字围”效果，如下图所示 解决办法：创建一个BFC来解决上面的问题。众所周知创建BFC的条件有： 1）float的值不为none； 2）overflow的值不为 ...
分类：
其他好文 时间：
2017-09-17 15:06:29
阅读次数：
117
核心：浮动元素会脱离文档流并向左/向右移动，直到碰到父元素或者另外一个浮动元素。 float ：left 向左浮动 right 向右浮动 none （默认） inherit 继承父元素 float效果 原效果图 换张图.....因为我突然发现一个问题，用这张图不好解释........ 原图 代码 然 ...
分类：
Web程序 时间：
2017-09-17 01:24:53
阅读次数：
235
一列布局 1.一列布局 不是自适应 2.一列宽度自适应布局 要想宽度自适应，只需要按照百分比来设置宽度，内容就可以根据浏览器窗口自动调节大小。 下例中宽度是自适应的，而高度不是自适应的。 3.单列经典布局 两列布局 1、宽度自适应两列布局 两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动， ...
分类：
Web程序 时间：
2017-09-03 22:11:31
阅读次数：
205
首先什么是浮动？ 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。 float造成的影响 1.浮动会导致父元素高度坍塌 最常见的问题就是父元素高度坍塌，它脱离当前正常的文档流，所以它也无法撑开其父元素 2.浮动对兄弟元素的影响 2.1如果兄弟元素为块级别的 在现代浏览器和IE ...
分类：
Web程序 时间：
2017-09-01 16:58:53
阅读次数：
217
一、相关概念介绍 1、文档流 HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。 2、浮动层 给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。 注意事项： ① 浮动元素在文档流空出的位置是由续的(非浮动)元 ...
分类：
Web程序 时间：
2017-08-24 21:18:43
阅读次数：
210
## 浮动 - 使用float设置元素浮动 - 可选值 - none 默认值. 元素不浮动 - left 元素向左浮动 - right 元素向右浮动 - 浮动的特点: - 当元素设置浮动后,元素会向页面左上或右上浮动 - 当浮动元素遇到父元素边框后, 会停止浮动 - 当浮动元素遇到其他浮动元素时,会 ...
分类：
其他好文 时间：
2017-08-10 23:35:33
阅读次数：
118
本文实现的效果如下： 图一： 图二： 思路： 将粉色区域绝对定位，right值为蓝色区域的宽度，父元素相对定位，蓝色区域右浮动即可。好处： 这样做的好处在于，相对于用js来实现粉色区域高度的自适应，这种方法可以提高性能，我们在写效果的时候，能用css来实现的，尽量不要用js来实现。 css在书写的时... ...
分类：
Web程序 时间：
2017-08-07 00:10:13
阅读次数：
278
CSS 浮动 请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把 ...
分类：
其他好文 时间：
2017-08-06 16:57:58
阅读次数：
162
一、使用float实现横列布局的方法 如下面所示：DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 实现下面图片中布局的css样式如下： 分析： 1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下： <section class="act ...
分类：
Web程序 时间：
2017-08-04 11:31:44
阅读次数：
327
