一个元素的css设置了浮动（float），会影响到他下面的元素，使html页面显示达不到预期的效果，下面介绍几种值得推荐的有效清除浮动的方法。 方法一：在设置浮动元素的后面新增一个div,将其设置成clear:both 例： 例： 例： ...
分类：
Web程序 时间：
2017-10-16 18:04:53
阅读次数：
225
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 这几天看到一篇比较好的文章，借鉴过来正好理解下浮动的概念 教程开始： 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： 可以看出，即使div1的宽度很小，页 ...
分类：
Web程序 时间：
2017-10-12 01:09:15
阅读次数：
206
CSS 浮动和清除浮动 在写页面布局的过程中，浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋，在这里我分享一下我对浮动这块知识的总结。 一、浮动的定义 使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰 ...
分类：
Web程序 时间：
2017-10-10 13:14:51
阅读次数：
185
在写页面布局的过程中，浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋，在这里我分享一下我对浮动这块知识的总结。 一、浮动的定义 使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的 ...
分类：
Web程序 时间：
2017-10-06 10:37:09
阅读次数：
169
方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响. 注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个 ...
分类：
Web程序 时间：
2017-09-25 15:18:35
阅读次数：
218
html是按照文件流（文档流）的方式加载的，但是全部是文档流的话，很多好看的样式是实现不了的，所以出现了浮动，相对定位，绝对定位的概念。 一、首先，按照文档流和非文档流来分类： ①文档流：就是按照上下左右的顺序一行一行排列的，长度不够就会自动挤到下一行。 ②非文档流：顾名思义就是脱离文档流的，在文档 ...
分类：
Web程序 时间：
2017-09-24 09:51:09
阅读次数：
640
先来了解一下block元素和inline元素在文档流中的排列方式。 block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； inline元素不会独 ...
分类：
Web程序 时间：
2017-09-21 16:43:58
阅读次数：
279
CSS浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用Flexbox和CSSGrid来对齐元素，变得相对容易起来。使用Flexbox可以使元素对齐变得容易，因此Flexbox已经被广泛使用了。同时，CSSGrid布局也..
分类：
Web程序 时间：
2017-09-20 16:34:11
阅读次数：
180
核心：浮动元素会脱离文档流并向左/向右移动，直到碰到父元素或者另外一个浮动元素。 float ：left 向左浮动 right 向右浮动 none （默认） inherit 继承父元素 float效果 原效果图 换张图.....因为我突然发现一个问题，用这张图不好解释........ 原图 代码 然 ...
分类：
Web程序 时间：
2017-09-17 01:24:53
阅读次数：
235
最近在开发过程中，有的时候会经常遇见明明知道需要这样做，但是为什么要这样做的原因我们却总是不明所以然。 先来解释下什么叫做清除浮动吧： 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以 ...
分类：
Web程序 时间：
2017-09-03 11:18:24
阅读次数：
177
