清除浮动以及:after元素

http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html

以上这篇示意图把清除浮动的几种方法讲的非常清楚了,其中有两种方法比较常用,一种是给父元素加overflow:hidden的属性,一种是给父元素设置:after伪类。

原文中用after清除浮动时,用了以下代码:

clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

这里给after设置了一个内容,即“.”,所以会产生一个额外的行来包含内容,因此要将height设为0,visibility设为hidden。也可以不给after设置内容,如果没有内容,自然也不用设置height:0清除下面的空行了,也就不用写visibility使内容隐藏了。如果不用clear:both,伪类内容会浮动到两个浮动元素旁边,如果不用display:block,依然会浮动到两个浮动元素旁边。

时间: 2024-10-29 20:37:28

清除浮动以及:after元素的相关文章

清除浮动——让包围元素包含浮动元素的四种方法

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 有一段代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta

清除浮动float那点事儿

抛弃那些没用的方法,只记住最实用的一种方法即可! 给要清除浮动的父元素多加一个class属性:clearfix!!! 样式如下: .clearfix:after{     content:".";             display:block;             height:0;             clear:both;             visibility:hidden; } 为了兼容ie6,ie7(现在的项目几乎已经完全不考虑) .clearfix{ z

单/多行文本溢出显示省略号+清除浮动

1.文本溢出显示省略号 (1)单行文本溢出,只需要给文本所在的容器设置如下样式: width:100px;/*容器一定要设置固定宽度*/ white-space:nowrap;/*强制一行内显示*/ overflow:hidden;/*溢出隐藏*/ text-overflow:ellipsis; /*显示省略号*/ 注意:即使给上面文本所在的容器设置了足够高的高度,也会强制变成单行内显示. (2)多行文本溢出,通过本人亲自试验,总结了以下几种方法: ①只适用于Webkit内核的浏览器,给文本所在

为什么要清除浮动,有哪些方式

一个块级元素如果没有设置height,那么其高度就是由里面的子元素撑开,如果子元素使用浮动,脱离了标准的文档流,那么父元素的高度会将其忽略,如果不清除浮动,父元素会出现高度不够,那样如果设置border或者background都得不到正确的解析 清除浮动的方式: 1)在浮动元素下加子元素<div class="clear"></div>然后设置样式.clear{ height:0px;font-size:0;clear:both;}: 2)在浮动元素下面(与浮动

CSS清除浮动和定位

1.原来在一行中的两个块,会因为浏览器窗口的大小改变而改变其原来的位置(变成多行),浏览器窗口宽度不够容纳解决方法:加个父div,并且设置宽度 .father {width:500px;height:300px;}<div class="father">   <div class="left">左</div>   <div class="right">右</div></div>

为什么要清除浮动

父元素的高度是由子元素撑开的,且子元素设置了浮动,父元素没有设置浮动,子元素脱离了标准的文档流,那么父元素的高度会将其忽略,如果不清除浮动,父元素会出现高度不够,那样如果设置border或者background都得不到正确的解析. 清除浮动的方法: 1.给浮动元素父级加overflow:auto;在IE6中需要加上zoom:1 2.使用:after伪元素 .clearfix:after{   content:"";   dispaly:block;   height:0;   clea

详说清除浮动

浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题.当然,随着时间的推移,这些问题终究有了一些出色的解决方案,Kayo 要在这里详细介绍的,除了是这些解决方案,还有其中的原理.(温謦提示:文章信息量大且篇幅长,请各位自备瓜子,饮料,音乐). 一.什么是清除浮动? 1.浮动的缺陷 在了解如何清除浮动之前,Kayo 先介绍为什么需要清除浮动.如本文开头所说的,浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的“副作用”.而一个元素设置了浮动(即

css清除浮动clear:left-right-both示例效果

示例很简单,图片有简单.容易理解的说明文字了: 理解: clear有四个值: none:允许左右两边有浮动对象: both:不允许左右两边有浮动对象: left:不允许左边有浮动对象: right:不允许右边有浮动对象. 附上demo示例代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

css-浮动与清除浮动的原理详解(清除浮动的原理你知道吗)

float元素A的特点: 脱离文档流 靠向left或right float元素会和块盒子重叠 准确来说,是块盒子和A重叠,但块盒子内容会浮动在A周围 不会和inline元素重叠 <div class="parent"> <div class="box"></div> <p> 孟子曰:"君子有三乐,而王天下不与存焉.父母俱存,兄弟无故①,一乐也:仰不愧于天,俯不怍②于人,二乐也:得天下英才而教育之,三乐也.君子