CSS clear both清除产生浮动 ，使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，就用clear样式属性即可实现。
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。
浮动是CSS布局中的一个重要概念，它可以让元素脱离标准文档流，并且可以让其他元素环绕在其周围。通常情况下，浮动用于创建多列布局或者图像与文字混排的效果。比如，我们可以使用浮动来实现一个左侧导航栏、右侧主体内容的页面布局。
我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们就用clear样式属性即可实现。
CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
CSS是Cascading Style Sheets的加简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。
http://www.cnblogs.com/ForEvErNoME/p/3383539.html
网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
注：当一个元素浮动之后，从普通文档流中脱离，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零
如果两个元素一个向左浮动，另一个向右浮动，左浮动元素的marginRight不会与右浮动元素的marginLeft相邻。
如何清除浮动 大家都知道，浮动会对文档产生影响，具体来看看会对文档产生什么影响？ 清除浮动后的效果： 未清除浮动后的效果： 实例代码（未清除浮动）： <!doctype html> <html> <
可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。
可以设置width和height，所以float通常用来制作横向配列的菜单，可以设置大小和横向排列。
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
原理：添加一对空的DIV标签，使用css的clear:both属性去除浮动，让父DIV获得高度。
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。
在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。
http://www.iyunlu.com/view/css-xhtml/55.html
首先介绍一下什么是伪类：伪类其实我们经常用的到，只是我们自己不会刻意的说这个是伪类这样的一个东西，我下面简单的举个例子就明白了怎么回事
本文介绍了前端性能优化中的垂直居中方案，包括使用Flexbox、Grid、CSS3进行垂直居中，以及使用定位和Transform进行垂直居中。同时，还介绍了如何通过代码拆分、懒加载和图片自适应来提高页面性能。最后，给出了一组示例和代码。
BFC块级格式化上下文Block Formatting Context，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，是用于布局块级盒子的一块渲染区域，并且与这个区域的外部毫无关系，是一个独立的区域，是一个环境。
overflow: auto;/* 使用浮动时候结合使用,可以使得容器的宽高自动体现出来 */
浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型，并不是二维的。元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表
在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能，本章学习一些进阶功能，看看伪元素能实现哪些方便好用的功能。
1、用于规定元素哪一侧不允许浮动元素，默认值为none，表示不清除，左右两侧允许浮动元素。
浮动特性 ( 脱离标准流布局 ) : 浮动的元素 会 脱离 标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ;
一、CSS与HTML的连接方式 1. 概述 * Cascading Style Sheets 层叠样式表 * 好处 降低耦合度 样式增强 2. 内联样式 ① 格式 hello world ② 注意 * 任何标签都有 style 属性【一般不使用内联样式】 * 作用范围为当前标签体 3. 内部样式 ① 格式 <head> <style> div {
CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何创建 BFC 非常有用，这些可以帮助你理解CSS中的布局是如何工作的。
一个盒子中主要的属性就5个：width、height、padding、border、margin。 width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。 height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距”
给父元素设置浮动后，子元素的浮动会归位，不过如果还有父元素，还需要设置。不推荐使用。
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。（一般情况下参考元素 == 父级元素，这里写成参考元素而不是父级元素，在下面我会再细说）
1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
感觉是刚过春招，又要开始秋招，对于技术渣渣、学历普通的我，忧愁再次降临。开始准备秋招路途中……来温故而知新，沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right，平时只用到clear:both，好像也只见到这个，这就尴尬。
padding-top(上内边距),padding-right(右内边距),padding-bottom(下内边距),padding-left(左内边距)
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框则停留。
通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法。
通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法。 本文也会同步到我的个人网站。
采用浮动，绿色块左浮，蓝色块右浮，利用浮动特性实现宽度超出另一行显示的效果，并是动态的。
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
2、使用浮动后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以打开其高度，所以父级元素的height会被忽略。
在写css样式时，可能是添加了一个样式后就达到了预期效果。有没有想过，是我们在不经意间触发了什么，帮助我们达到了效果？本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面：
标题图 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
大家好，又见面了，我是你们的朋友全栈君。 clear属性只会影响使用它的元素，具体可以看我的这篇文章： http://blog.csdn.net/liujan511536/article/details/50086275 当我们给一个元素加上:after时，就是在这个元素内容的后面加上新的内容，
这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
