对 clear:both 这个样式的一些理解

看下我今天一直研究的两个例子吧。希望对自己跟大家有帮助：

例子一：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

<style>

    .clearfix:after{

                visibility: hidden;

                display: block;

                font-size: 0;

                content: ".";

                clear: both;

                height: 0;

        }

    </style>

</head>

<body>

    <div style="border:2px solid red;">

        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

        <div style="clear:both;"></div>

    </div>

<div style="height: 10px">

</div>

    <div class="clearfix" style="border: 2px solid red;">

        <div style="float: left;width:80px;height: 80px;border:1px solid blue;">TEST DIV</div>

    </div>

</body>

</html>

<div style="clear:both;"></div> 与  class="clearfix"  这个的作用是一样的，让父类的div展开。
Clear:both;其实就是利用清除浮动来把外层的div撑开。你可以将上面的其中一个去掉，看下效果。
所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

例子二：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body {

            font-family: Tahoma, Geneva, Helvetica, sans-serif !important;

            color: #000 !important;

            height: 100% !important;

            margin: 0 !important;

            padding: 0 !important;

            background-color: #fff !important;

        }

        .clearfix:after {

            content: ".";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

        }/* 作用：   与<div style="clear: both"></div>相同，将外层的div撑开         */

    </style>

</head>

<body>

<div style="background-color: #f5fafe;width: 500px;height: 300px;margin: 20px 20px">  <!--最外层div-->

    <div style="padding: 50px 40px 40px 80px">   <!--用户名/密码的承载层，定义距离父层的距离-->

        <div style="padding: 20px 20px;">         <!--用户名/密码层之间的空间间隔-->

            <div style="float: left;width: 20%;text-align: right;"><label>用户名:</label></div>   <!--浮动20%-->

            <div style="float: left;position: relative">    <!--与下面children层进行position匹配-->

                <div><input /></div>              <!--定义标签以及错误已经样式-->

                <div style="position: absolute;font-size: 8px;color:#ff0000;background: #FFEBEB;height: 15px;line-height: 15px;width: 100%">用户名不能为空</div>

            </div>

            <div style="clear: both"></div>        <!--将外层的div撑开，与class='chearfix'作用相同-->

        </div>

        <div class="clearfix" style="padding: 20px 20px;">

            <div style="float: left;width: 20%;text-align: right;"><label>密码:</label></div>

            <div style="float: left;position: relative">

                <div><input type="password"/></div>

                <div style="position: absolute;font-size: 8px;color:#ff0000;background: #FFEBEB;height: 15px;line-height: 15px;width: 100%">密码不能为空</div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

例子一有参考：http://blog.sina.com.cn/s/blog_4a3789a70100jfv4.html

对 clear:both 这个样式的一些理解的更多相关文章

css样式表的理解
全拼Cascading Style Sheete 美化html网页 1分为内联样式表和html联合显示内嵌样式表在单独区域内嵌,必须在head 外部样式表需建一个css文件,保存并附加 2选 ...
Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容，读取一段话中相同样式内容，理解Document中run
from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word信息表.d ...
css样式 float的理解
float w3cSchool里解释说, 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样 ...
[css]【转载】CSS样式分离之再分离
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...
转载：Clear Float
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div ...
浏览器默认样式及reset
写在前面首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding ...
我对CSS vertical-align的一些理解与认识（一）
一.关于今天,本文,及其他今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣:今天又是国际护士节,看到微博上护士照横流,我很欣慰. 一段放松的YY后,进入正题.上个月21号,有位同行留言想 ...
附加题-stack的理解
这次的附加题推荐的博客是http://www.ruanyifeng.com/blog/2013/11/stack.html阮一峰的,感觉讲的深入浅出,比较适合对计算机刚刚接触的人: 下面谈谈感想: 这 ...
WS_CLIPCHILDREN和WS_CLIPSIBLINGS的理解(转载)
1.1 WS_CLIPCHILDREN WS_CLIPCHILDREN样式从字面上可以理解成ClipChildren,裁减子窗口. MSDN里的E文解释:Excludes the area occup ...

随机推荐

jquery weibo 留言
<script> function getCnTime(s){ ); ))+'-'+toDou(oDate.getDate())+' '+toDou(oDate.getHours())+' ...
es6 const
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
简单了解undo
ORACLE 数据库 DML语句执行之前,会将数据块修改前的信息镜像保存到 undo 段 insert语句 rollback 将会执行一条deleter操作 (相对数据量最小,只需利 ...
Starling项目启动时报错This application is not correctly embedded (wrong wmode value)
这个其实是Flash报的“ErrorEvent:. text=Error #3702: Context3D 不可用”错误被Starling变了一下. 解决方法:找到项目文件夹中的html-templa ...
(转)设计模式_Singleton单例模式
静态初始化 public sealed class Singleton { private static readonly Singleton instance = new Singleton(); ...
ASP.NET 服务器控件的生命周期
服务器控件生命周期简介服务器控件的生命周期是创建服务器控件最重要的概念.作为开发人员,必须对服务器控件生命周期深刻理解.当然,这不是一朝一夕就可以做到的.对于学习控件开发技术的初学者,可以不必掌握得 ...
Fragment笔记整理
前言一直在用Fragment,但是没有系统的整理过,Google了一下相关文章,看到了几篇,将几篇还不错的文章重点整理了下,很多是直接Copy的,只为做个笔记,以后翻来看比较方便,建议大家看一下下面 ...
Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
C#小程序飞行棋关卡操作
飞行棋关卡操作 1.分析设计飞行棋的基本规则为二人轮流掷骰子,则此处为循环结构,然后根据投掷出的点数进行前进<注:在每一步前进之后均应该判断是否走完了游戏>,在遇到关卡时进行相应的操作, ...
java BigDecimal add 等方法遇到的问题
//这篇随笔是为了提醒自己避免重复错误 //原先的代码是这样的,想着输出会是9.00,可是结果却是0.00 BigDecimal day_fee = new BigDecimal("0.00 ...

对 clear:both 这个样式的一些理解

对 clear:both 这个样式的一些理解的更多相关文章

随机推荐

热门专题