使用 after 伪类清除浮动

使用after伪类清除浮动

使用after伪类清除浮动 .department li:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; }…

以前清除浮动的时候总是在想要清除浮动的元素后面添加 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 .clearfix:after{ content:""; display:block; ; clear:both; visibility:hidden; } 为兼容IE6,IE7,因为ie6,ie7不能用after伪类.加上下面代码…

什么是BFC？ CSS 如何使用伪元素清除浮动？

.BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”. 先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素.所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的:BFC元素也可以用来清除浮动带来的影响,因为如果不清除,子元素浮…

使用before和after双伪元素清除浮动

使用方法: .clearfix:before,.clearfix:after { content:"."; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 优点: 代码更简洁缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout. 代表网站: 小米.腾讯等…

彻底理解浮动float CSS浮动详解清除浮动的方法

我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 2. 浮动流使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做. 3. 定位流定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标准流有影响. 浮动(float) 我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要…

一天搞定CSS：清除浮动（float）--13

上一节已经说明了为什么要清除浮动了.这里我们就来解决浮动产生的各种问题. 为什么要清楚浮动? 地址:http://blog.csdn.net/baidu_37107022/article/details/71554283 1.清除浮动方法概览 2.clear方法代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <…

HTML 中清除浮动

html中如何清除浮动在html中,浮动可以说是比较常用的.在页面的布局中他有着很大的作用,但是浮动中存在的问题也是比较多的.现在我们简单说一下怎么去除浮动首先我们先简单的看一下浮动: 首先我们先创建一个简单的div,并在其中再放两个div,并且给他们不同的样式. css样式代码: 1 2 3 4 5 #div1{background: medium purple;} #left{width: 200px;height: 100px;background: sky-blue;} …

html中如何清除浮动

在html中,浮动可以说是比较常用的.在页面的布局中他有着很大的作用,但是浮动中存在的问题也是比较多的.现在我们简单说一下怎么去除浮动首先我们先简单的看一下浮动: 首先我们先创建一个简单的div,并在其中再放两个div,并且给他们不同的样式. css样式代码: #div1{background: medium purple;} #left{width: 200px;height: 100px;background: sky-blue;} #right{width: 250px;height:…

从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.链接伪类 a:link{属性:值;} /*链接默认状态 ( a{属性:值}效果是一样的.)*/ a:visited{属性:值;} /*链接访问之后的状态*/ a:hover{属性:值;} /*鼠标放到链接上显示…

css伪类选择器详细解析及案例使用-----伪元素

伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter.::first-line.::before.::after.::selection.目的是为了区分伪元素与伪类.对于IE6~IE8,仅支持单冒号写法)1.::first-letter :用来选择文本块的第一个首字母.2.::first-line :用来匹配元素的第一行文本.3.::befor 和 ::after :创建一个作为当前元素子元素的伪元素.常通过 content 属性来为一个元素添加修饰性的内容. 此元…

【使用 after 伪类清除浮动】的更多相关文章