文档章节

清楚浮动的方法

拉普拉斯婷
 拉普拉斯婷
发布于 2016/06/16 14:38
字数 544
阅读 12
收藏 0
点赞 0
评论 0

清楚浮动的两种方法:

方法一:给float标签的父级标签添加overflow: hidden/auto属性 例如:

<!DOCTYPE html>
<html>
<head>
    <title>DIVCSS5实例 DIV与DIV覆盖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .boxa{overflow: hidden;}
        .boxa,.boxb{ margin:0 auto; width:400px;}
        .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
        .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
        .boxb{ border:1px solid #000; height:40px; background:#999}
    </style>
</head>
<body>
<div class="boxa"><!--方法一:给float标签的父级标签添加overflow: hidden属性-->
    <div class="boxa-l">内容左</div>
    <div class="boxa-r">内容右</div>
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html>

方法二:在float标签的父级标签闭合之前添加标签,使用clear:both清楚浮动

<!DOCTYPE html>
<html>
<head>
    <title>DIVCSS5实例 DIV与DIV覆盖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .boxa,.boxb{ margin:0 auto; width:400px;}
        .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
        .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
        .boxb{ border:1px solid #000; height:40px; background:#999}
        .clear{clear: both;}
    </style>
</head>
<body>
<div class="boxa">
    <div class="boxa-l">内容左</div>
    <div class="boxa-r">内容右</div>
    <div class="clear"></div><!--方法二:在float标签的父级标签闭合之前添加标签,使用clear:both清楚浮动-->
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html>

方法三:借助给父级元素添加after伪类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="author" content="Chomo"/>
    <link rel="start" href="http://www.14px.com" title="Home"/>
    <title>利用box-sizing实现div仿框架</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .parent{width: 300px; border: 1px solid;}
        .son{width: 20px; height: 20px; background: #EE4063; float: left;}
        span{float: right;}
        .clear:after{
            content: "."; /*添加句号*/
            height: 0; /*让高度为0,否则会撑大父级框*/
            visibility: hidden; /*让句号只站位不显示*/
            display: block; /*一定要块级框显示,否则撑不开*/
            clear: both;/*清楚浮动*/
        }
    </style>
</head>
<body>
<div class="parent clear">
    <div class="son"></div>
    <span>操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人</span>
</div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
拉普拉斯婷
粉丝 0
博文 33
码字总数 5836
作品 0
深圳
css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

一、抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></div> 分析CSS......

乐派电影 ⋅ 2014/04/11 ⋅ 3

页面布局中常用的清除浮动的方法

几种清楚浮动的方法: 1、设置空标签 2、父容器设置display: inline-block 3、父容器设置overflow值auto或hidden 4、clearfix方法 例子: Html结构是这样的: cont1高度不固定,cols1和cols2...

kenneth5530 ⋅ 2014/04/15 ⋅ 0

CSS清除浮动常用方法小结

使用div+css布局的好处不用多说,经常性地会使用到float,那么清除浮动就是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。 常用的清除浮动的方法有以下...

卖火柴的format ⋅ 2014/07/16 ⋅ 0

[译文]清除浮动的技巧

原文:Techniques for Clearing Floats 如果你很清楚(浮动元素)的后继者元素是什么,那么你只需将应用于那个元素即可。这是一个理想的情况,因为这种方法无需花式的技巧以及额外的元素。当...

huangpin815 ⋅ 2017/09/05 ⋅ 0

CSS浮动属性Float到底什么怎么回事,下面详细解释一下

float 是 css 的定位属性。在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

clearfix清除浮动进化史

![在此输入图片描述][1] 我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧。 首先在很多很多年以前我们常用的清除浮动是这样的。 现在可能还可以...

百变茄 ⋅ 2014/02/23 ⋅ 0

细说清除浮动

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

只尺八寸 ⋅ 2015/12/10 ⋅ 0

网页的布局方式及浮动元素

网页布局方式其实就是浏览器是如何对网页中的元素进行排版的 1.标准流(文档流、普通流)排版方式 浮动流的排版方式 注意点: 特点: 3.定位流排版方式 浮动元素脱标 4.1 浮动元素脱标就是脱...

随风流年 ⋅ 2017/07/31 ⋅ 0

CSS BUG顺口溜,快速牢记CSS的Bug处理方法

CSS存在Bug,但怎么能让我们记住这些Bug,以便在以后编写CSS代码的时候能很好的应对,这不,有心人就编写了这么一个CSS BUG顺口溜,还是挺不错的: 一、IE边框若显若无,须注意,定是高度设置...

名字已被取 ⋅ 2016/03/02 ⋅ 0

float深入剖析

float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为...

剑凌魂 ⋅ 2013/09/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

监控各项服务

比如有三个服务, 为了减少故障时间,增加监控任务,使用linux的 crontab 实现. 步骤: 1,每个服务写一个ping接口 监控如下内容: 1,HouseServer 是否正常运行,所以需要增加一个ping的接口 ; http...

黄威 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

nodejs __proto__跟prototype

前言 nodejs中完全没有class的这个概念,这点跟PHP,JAVA等面向对象的语言很不一样,没有class跟object的区分,那么nodejs是怎么样实现继承的呢? 对象 对象是由属性跟方法组成的一个东西,就...

Ai5tbb ⋅ 昨天 ⋅ 0

Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库

Q: Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库 A: 执行以下2条命令解决: apt-get install php-mysql service apache2 restart php -m 执行后会多以下4个模块: mysqli mysqlnd...

SamXIAO ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部