文档章节

清楚浮动的方法

拉普拉斯婷
 拉普拉斯婷
发布于 2016/06/16 14:38
字数 544
阅读 12
收藏 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
138.6K
3
页面布局中常用的清除浮动的方法

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

kenneth5530
2014/04/15
0
0
clearfix清除浮动进化史

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

百变茄
2014/02/23
0
0
[译文]清除浮动的技巧

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

huangpin815
2017/09/05
0
0
CSS浮动属性Float到底什么怎么回事,下面详细解释一下

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

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java Lock接口分析之ReentantReadWriteLock

ReentantReadWriteLock读写锁,在读线程多余写线程的并发环境中能体现出优异的性能,相比于synchronized与ReentrantLock这种独占式锁的模型,ReentantReadWriteLock采用独占式写锁与共享式读...

我爱春天的毛毛雨
15分钟前
0
0
EFK (Fluentd ElasticSearch Kibana) 采集nginx日志

本文描述如何通过FEK组合集中化nginx的访问日志。本人更喜欢按顺序来命名,所以使用FEK而不是EFK. 首先在nginx服务器上执行以下操作. 安装ruby http://blog.csdn.net/chenhaifeng2016/artic...

xiaomin0322
17分钟前
0
0
一键下载:将知乎专栏导出成电子书

老是有同学问,学了 Python 基础后不知道可以做点什么来提高。今天就再用个小例子,给大家讲讲,通过 Python 和爬虫,可以完成怎样的小工具。 在知乎上,你一定关注了一些不错的专栏(比如 ...

crossin
26分钟前
1
0
synchronized 之 对象锁 和 类锁

一、synchronized(object) 如果object没有被加锁,则获取object的锁;如果object已经被加锁则等待object的锁被释放。 二、需要加锁的情景 多线程共享同一资源会引起线程安全的情况下,才需要...

MyOldTime
27分钟前
6
0
tomcat 单机/多机 部署多应用

一.单机部署多应用: 1.在 linux 下解压安装两个 tomcat:tomcat1, tomcat2; 2.修改 /etc/profile, 增加 tomcat 环境变量: path 中加上 重新加载配置文件 source /etc/profile 3.修改 tomc...

imbiao
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部