文档章节

CSS笔记:伪类清除浮动的两种方法

Angelks
 Angelks
发布于 2017/03/29 20:01
字数 153
阅读 28
收藏 1

 

方法一:

.clearfix:after {

            content: ".";

            overflow: hidden;

            visibility: hidden;

            display: block;

            height: 0;

            clear: both;

        }

        .clearfix {

            *zoom: 1;

        }

 方法二:

 .clearfix:before,.clearfix:after {

            display: table;

            content: "";

        }

        .clearfix:after {

            clear: both;

        }

        .clearfix {

            zoom: 1;

        }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .father {
            width: 700px;
            background-color: pink;
            border: 1px solid red;
        }
        .ld,.le {
            height: 300px;
            background-color: green;
            width: 300px;
            float: left;
        }

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

        .clearfix:before,.clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }

    </style>
    <title>Document</title>
</head>
<body>
    <div class="father clearfix">
        <div class="ld">老大</div>
        <div class="le">老二</div>
    </div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
Angelks
粉丝 0
博文 10
码字总数 6719
作品 0
马鞍山
前端工程师
私信 提问
万能清除浮动样式

这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。 这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。...

老先生二号
2017/05/28
0
0
CSS清除浮动

前言 总括: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出...

Damonare
2016/12/07
0
0
css中:after与::after的区别

基本概念 1.他们都是CSS伪元素,与:hover/:active等伪类不一样。 2.:before/:after伪元素是在CSS2中提出来的,所以兼容性可能到IE8了。 3.::before/::after是CSS3中的写法,为了将伪类和伪元...

BULLEPAO
2017/07/02
0
0
细说清除浮动

一、什么是清除浮动? 先说下为什么需要清除浮动。 一个元素设置了浮动(即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值)之后会影响它的兄弟元素的位置和父元素产...

只尺八寸
2015/12/10
50
0
CSS核心内容整理 - (上)

一. HTML标记与文档结构 文本用闭合标签,引用内容用自闭合标签.常见的块级标签:<h1>~<h6>,<p>,<ol>,<li>,<blockquote>等.行内标签则有:<a>,<img>,<em>,<strong>,<abbr>,<cite>,<q>等. 下面这......

顽Shi
2014/03/31
0
8

没有更多内容

加载失败,请刷新页面

加载更多

grafana安装使用及与zabbix集成

grafana简介 Grafana是一个完全开源的度量分析与可视化平台,可对来自各种各种数据源的数据进行查询、分析、可视化处理以及配置告警。 Grafana支持的数据源: 官方:Graphite,InfluxDB,Ope...

阿dai学长
29分钟前
6
0
带你看数据挖掘与机器学习-厦大EDP上课出勤预测

带你看数据挖掘与机器学习-厦大EDP上课出勤预测 标签: 数据挖掘 特征工程 机器学习 出勤预测 write by xmhexi 2019/3/22 内容提要 首先说明本文是一篇科普文章,通过一个实际案例,帮助理解什...

xmhexi
今天
73
0
IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
5
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
5
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部