clearfix用法

clearfix 用法

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开.看下面的例子:Div布局如下:Css代码如下:.out{border:1px solid #F00; width:500px;}.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}.inner2{width:200px; height:200px; float:left; borde

【css】清除浮动（clearfix 和 clear）的用法

本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>如何

css清除浮动clearfix:after的用法详解

如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法: CSS代码: 复制代码代码如下: .clearfix:after { content: "." ; display: block ;height: 0 ;clear: both ;visibility: hidden ;}.clearfix{ display: inline-block; }/* Hides from IE-mac */ *html .

clearfix的用法（转）

clearfix的用法 (2013-12-31 10:41:24) 标签: clearfix 清除浮动 clearboth height zoom 分类: 网页制作如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开.看下面的例子:Div布局如下:Css代码如下:.out{border:1px solid #F00; width:500px;}.inner1{width:200px; height:200px; floa

css中clearfix清除浮动的用法及其原理示例介绍

clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: block; /**//*加入的这个元素转换为块级元素.*/ clear: both; /**//*清除左右两边浮动.*/ visibility: hidden; /**//*可见度设为隐藏.注意它和display:none;是有区别的.visibility:hidden;仍然占据空间,只是看不到而已:*/ l

clearfix的用法

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开.看下面的例子:Div布局如下:Css代码如下:.out{border:1px solid #F00; width:500px;}.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}.inner2{width:200px; height:200px; float:left; borde

clearfix:after 的用法

想要清除浮动就要在父元素上加上 clearfix:after .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容: content: "."; <----内容为“.”就是一个英文的句号而已.也可以不写. display: block; <----加入的这个元素转换为块级元素. clear: both; <----清除左右两边浮动. visibility: hidden; <----可见度设为隐藏.注意它和di

clearfix的最佳方案----在路上（22）

clearfix的纠结骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. 但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div. 最优浮动闭合方案(推荐): .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hid

你所不知的 CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. Creative Button Styles 一基本语法在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用

前端代码目录结构、常用 piugin、元素补充用法及其它注意事项

目录结构: app: .html文件 css: .css文件 script: 脚本文件 plugin: 插件 (此目录放一些通用代码) 注意事项: 1.在IE浏览器下img会显示边框,为了保证兼容性,应在css样式全局写上 img(border:0px;) 2.input 标签默认有 :focus() 伪类样式(点击input输入框,input边框会有颜色变化和稍有突出) 和 padding,在对input定位需要比较精确的时候,要设置input{padding:0px;}(其实在这也没必要

CSS ::before 和 ::after 伪元素另类用法

原文地址:http://justcoding.iteye.com/blog/2032627 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. 一基本语法在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将

解读浮动闭合最佳方案：clearfix

.clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. 但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div. 最优浮动闭合方案(这是我们推荐的): .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{*

clearfix清除浮动

首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题.但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用. 这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化.但是我发现大型网站中居然还在使用这种清楚浮动的方法.有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样

:after和:before炫酷用法总结

引入提到伪类,在我的印象中最常用的不过是:hover.:active.:link.:visited,还有css3里的常用伪类选择器:last-child.:first-child.nth-child(n)等等,说实在其他的我发现"然并卵". 百度一下:after和:before会发现有很多关于研究它们用法的文章,形形色色各式各样,说明这两个伪元素在实际工作中还是很实用的,再结合css3的动画,它们能为页面添加很多意想不到的效果! 从学习伪类,不小心又延伸到了伪类元素(eg.我们常

clearfix清除浮动进化史

我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动首先在很多很多年以前我们常用的清除浮动是这样的. .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题.但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用. 这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利

jquery中的each用法以及js中的each方法实现实例

each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量. 下面提一下each的几种常用的用法 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); a

Clearing Floats清除浮动--clearfix的不同方法的使用概述

清除浮动早已是一个前端开发人员必学的一课.毫无疑问,多年来,我们已经接触过多种清除浮动的方法,现在“clearfix methods”越来越被大家熟知.在深入剖析“clearfix”的多种用法之前,我们来先看看clearfix方法试图解决哪些问题. 场景: .el-1 和.el-2是并排浮动在.container元素里,同时.main元素是紧挨着.container 预期效果: 我们想要.container的高度扩展到它的子元素的高度(例如:.el-1或者.el-2的高度),同时我们也希望.m

CSS伪类对象before和after的用法

一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很少用!不过最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果,所以就来研究研究哈! 一.先来看哈他们的定义哈! 1.selector:before( sRules ) 它要和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容: 2.selector:after( sRules ) 和before用

CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. Creative Button StylesCreative Button Styles 一基本语法在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将这两

Compass用法指南

Compass用法指南 Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护.但是,只有搭配Compass,它才能显出真正的威力. 本文介绍Compass的用法.毫不夸张地说,学会了Compass,你的CSS开发效率会上一个台阶. 本文假设你已经掌握了CSS的主要用法,如果你还懂Sass,那就更好了.但是不懂Sass,一样可以阅读本文. 一.Compass是什么? 简单说,Compass是Sass的工具库(toolkit). Sass本身只是一个编译器,Compas

clearfix用法

热门专题