学习CSS笔记——清除浮动clear

这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。

一边整理《JavaScript》教程,一边在网上和女粉丝侃大山，突然间，一个说自已是从辽宁铁岭来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”，我问：“你们都想学啥？”，女粉丝说：“陈老师！我想知道清除浮动clear方法。“下面就给大家讲下。

以前给大家讲过正常文档流和脱离文档流，我们讲过使用浮动float脱离文档流的方法，现在给大家讲下如何使用clear设计一条CSS语言清楚浮动。如语法1。

clear :...值...;

clear参数表

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

这次的试验需要先设计一个脱离文档流浮动float效果，如本文下面写的综合代码1，再设计一个CSS语言clear清除两侧浮动，如综合代码2，来看下clear的效果。

使用css语言，设计一个div选择器，实现控制宽、高、边框、左边距、脱离文档流效果，内容如css语言1。

div
{
width:100px;
height:100px;
border:1 pxsolid silver;
margin-left:10px;
float:left;
}

把前面设计好的css语言1，嵌入到html5基础框架body中，如综合代码1。

运行综合代码1，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。

注：看到图1页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。

图1

设计一个脱离文档流的浮动float效果，如综合代码1和如图1，图1就是正常文档流div浮动脱离后的效果。
下面再设计一个简单的CSS清楚浮动。左右两边清除浮动效果，如css语言2。

div
{
clear : both ;
}

把前面设计好的这个CSS语言2，嵌入到综合代码１后，得到下面的综合代码２。

运行综合代码2，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。

注：看到图2，页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。

图2

从图2和图1的对比中我们可以看到，清除浮动后的效果其实就和正常文档流的效果一样，这个清除浮动的试验就完成了，清除浮动还有很多用法以后有机会在和大家讲。

好！杰哥CSS3学习笔记分享到这里，要知后事如何请关注、分享、收藏，如果喜欢请打赏。