CSS 浮动清理，不使用 clear:both标签

2024-08-21 13:47:12

例如：
        <div style="background:#666;"> 
                <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
        </div>
此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。
若将代码修改为：
        <div style="background:#666;"> 
                <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
                <div style="clear:both"></div>
        </div>
注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。这里有一种更好的方法，将HTML代码修改为：
        <div  class="clearfix" style="background:#666;"> 
                <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
        </div>
定义CSS类，进行“浮动清理”的控制：

代码如下:

.clearfix:after {}{
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}            /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */
.clearfix {}{
  display: inline-block;
}                /* 这是对 Mac 上的IE浏览器进行的处理 */
/**//* Hides from IE-mac \*/
* html .clearfix {}{height: 1%;}        /* 这是对 win 上的IE浏览器进行的处理 */
.clearfix {}{display: block;}        /* 这是对display: inline-block;进行的修改，重置为区块元素*/
/**//* End hide from IE-mac */

此时，预览以上代码( 删去这种注释 )，会发现即使子元素进行了浮动，父元素float container仍然会将其包围，进行高度自适应。

CSS 浮动清理，不使用 clear:both标签

例如: <div style="background:#666;">  <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div> </div> 此时预览此代码,我们会发现最外层的父元素f
详解CSS伪元素的妙用单标签之美

:before和::before的区别在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持这两种表示方式. #id:after{ ... } #id::after{ ... } 单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素.对于 CSS2 中已
DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags

做DIV+CSS页面,不推荐使用的标签代码,请尽量不要使用这些HTML标签: Do not use these html elements in html pages. Presentational elements should not be used. Support for some elements has been (or will be) deprecated; they should not be used. Don't Use These Tags Presentationa
CSS清除浮动常用方法小结

常用的清除浮动的方法有以下三种. 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. Left Right [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:b
HTML clearfix清除浮动讲解

一.浮动的概念浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 二.浮动的影响 1. 浮动会导致父元素高度坍塌父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题. 浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动. 三.浮动的清除 1. clear属性的空标签在浮
CSS超级技巧大放送合集

一.使用css缩写使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 三.区分大小写当在XHTML
CSS经典实用技巧18招

文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充. 翻译:阿捷原文作者:Roger Johansson 作者简介:住在瑞典哥德堡,1994年开始接触和参与web设计,456 Berea Street是他的住址,因此采用这个名字作为他的个人主页域名最近,经常有朋友问我一些工作中遇到的CSS问题.他们总是不能很好的控制CSS,
收藏了很久的CSS的十八般技巧

最近,经常有朋友问我一些工作中遇到的CSS问题.他们总是不能很好的控制CSS,影响CSS的效率发挥.我来分析总结一下错误所在,帮助大家更加容易使用CSS. 本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充. 一.使用css缩写使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语
Python全栈之学习CSS(2)

目录 1. css背景图 1.1 背景属性 1.2 背景图片引入 2. 相对_绝对_固定 2.1 相对定位 2.2 绝对定位 2.3 固定定位 3. float浮动 3.1 display转换元素 3.2 float浮动 4. html里面的bug 4.1 float内容塌陷问题 4.2 margin-top失效问题 4.3 overflow 总结 1. css背景图 1.1 背景属性 <!DOCTYPE html> <html lang="en"> <h
ThinkPHP中html:list标签用法分析

本文实例分析了ThinkPHP中html:list标签用法.分享给大家供大家参考,具体如下: 复制代码代码如下: <html:list id="checkList" name="user" style="list" checkbox="true" action="true" datasource="list" show="id:编号|8%,title:标题:edit,c

CSS 浮动清理，不使用 clear:both标签

相关推荐

随机推荐