浮动清除、before&after

::before 和 ::after属于伪元素,而 :before 和 :after属于伪类(CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号)因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写。过于老的浏览器可能会存在支持问题,不过伪元素大多是配合 CSS3 使用,就无所谓向下兼容了

这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。比较有用的是以下几个值:

  • [String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:

    1 a:after { content: ""; } 
  • attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:
    1 a:after { content:"(" attr(href) ")"; } 
  • url() / uri() – 用于引用媒体文件。示例:
    1 h1::before { content: url(logo.png); } 
  • counter() –  调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:
    1 h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " } 

清除浮动是一个时常会遇到的问题,不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在,无需增加没有意义的元素,仅需要以下样式即可在元素尾部自动清除浮动:

HTML代码如下:

    .clear-fix { *overflow: hidden; *zoom: 1; }
    .clear-fix:after { display: table; content: ""; width: 0; clear: both; }  
时间: 2024-10-05 07:59:27

浮动清除、before&after的相关文章

html 4 浮动 清除浮动

前一个元素设置浮动了 紧挨着的元素就浮动在上个元素的下面 被上个元素给覆盖 要不想被覆盖 要清除浮动 clear:left  clear:right 左浮元素不覆盖   右边元素不覆盖 clear:both; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

浮动 清除浮动(造成的影响)

一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的. 注意,以上这些理论,是指标准流中的div.无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”. 浮动 浮动:浮动的框可以左右移动,直至它的外边缘遇到包

浮动清除

12, (1),为什么会出现这种情况:因为对于浮动而言,相当于子元素浮动在父元素上方,浮动元素在文档流中删除了,好像父元素中不存在了子元素,此时父元素默认宽度为零,会出现折叠情况 ,下面是对浮动造成的宽度为零的解决办法 (1):父元素自定义高度,这对于不定宽的块高度不适用 (2):子元素最后再加上一个空的div标签 对那个空的div标签清除浮动:clear:both: (3):父元素设置overflow:hidden , 但必须事先定义宽度或 zoom:1 且不能定义height 不能和posi

css基础(浮动 清除f浮动)

文档流(标准流) 1.元素自上而下,自左而右 2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框的边框为止 特点 设置了浮动的元素不占原来的位置(不在标准流) 可以让块级元素在一行显示 浮动可以行内元素为行内块元素 注意:转化过程尽可能用display转化 浮动的用途 文本绕图 <head> <meta charset="UTF-8"> <title>&

CSS浮动清除的方法

 clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为".clear",并且对应选择器样式为"clear:both",然后我们在父级"</div>"结束前加此div引入"class="clear""样式.这样即可清除浮动.  父级div定义 overflow:hidden对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动.优点是可

CSS浮动清除的几种种方法

 clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为".clear",并且对应选择器样式为"clear:both",然后我们在父级"</div>"结束前加此div引入"class="clear""样式.这样即可清除浮动.  父级div定义 overflow:hidden对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动.优点是可

关于浮动清除的一些小感悟,4种方法清除浮动

如何脱离标准文档流,css中给了三种方法,使一个元素脱离标准文档流. 1.浮动.   2.绝对定位.  3.固定定位. 一. 什么是浮动呢?定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 其实也就是把快级元素变成能和别的快级并排成一行. 二.浮动的的元素有4点特性: 1.浮动元素会脱离标准文档流,已经不区分快和行了. 2.浮动的元素会互相贴靠. 3.浮动的元素有“字围”的效果. 4.收缩.一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽

横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的 话,两个浏览器下会有区别,具体有一个会产生间隙.兼容做法就是都设置float属性.但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上.我通常把清除浮动写成单独的<div clas

CSS中的浮动清除

先来看一个实验:现在有两个div,div身上没有任何属性.每个div中都有li,这些li都是浮动的. 理想的效果:可实际的效果: 这个地方就涉及到浮动,因为两个父元素div都没有高度(或者小于子元素的高度),所以不能给浮动的孩子一个容器,所以后边的li还拼命的往上面的最后一个li靠近. 清除浮动就是要给父元素加一个大于等于子元素高度的高度. 1.清除浮动:给父元素一个高度,让其子元素在父元素中浮动.只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素. 2.