浅谈css中浮动和清除浮动带来的影响
.clearfix{
clear: both;
}
</style>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<div class="clearfix"></div>
<div class="box3">div3</div>
</body>
<style>
.box{
background-color: yellow;
}
.box1{
width: 100px;
height: 100px;
background-color: green;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
<style>
.box{
background-color: yellow;
overflow:atuo; //或者是hidden
}
.box1{
width: 100px;
height: 100px;
background-color: green;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
看看效果吧:
.clearfix:after{
content:"";
display:table;
height:0;
visibility:both;
clear:both;
} .clearfix{
*zoom:1; /* IE/7/6*/
}
<style>
.clearfix:after{
content:"";
display:table;
height:0;
visibility:both;
clear:both;
} .clearfix{
*zoom:1; /* IE/7/6*/
} </style> <body>
<div class="box clearfix">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
浅谈css中浮动和清除浮动带来的影响的更多相关文章
- 浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- 浅谈CSS中的定位知识
1,静态定位(static) 表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 2,相对定位(relative) 将移动元素盒,但是它在文档流中的原始空间会保留下来: 相对定位元素有如 ...
- 浅谈css中一个元素如何在其父元素居中显示
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...
- 浅谈css中的position
什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- 浅谈CSS中的百分比
结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自 ...
- 浅谈css中单位px和em,rem的区别-转载
px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div ...
- 浅谈css中渐变衔接
无论transition还是keyframes,如何让变化更自然,这是前端应该考虑的问题. 这里,我简单总结下自己的方法. 以实践为例子. 1.图像渐变 @keyframes looppic{ fro ...
- CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
随机推荐
- 「Python」人脸识别应用
人脸识别主要步骤: face_recognition 库的安装 安装此库,首先需要安装编译dlib,此处我们偷个懒,安装软件Anaconda(大牛绕过),此软件预装了dlib. 安装好后,我们直接通过 ...
- [DeeplearningAI笔记]序列模型2.6Word2Vec/Skip-grams/hierarchical softmax classifier 分级softmax 分类器
5.2自然语言处理 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.6 Word2Vec Word2Vec相对于原先介绍的词嵌入的方法来说更加的简单快速. Mikolov T, Chen ...
- 基础但是很重要的2-sat POJ 3678
http://poj.org/problem?id=3678 题目大意:就是给你n个点,m条边,每个点都可以取值为0或者1,边上都会有一个符号op(op=xor or and三种)和一个权值c.然后问 ...
- 条件转化,2-sat BZOJ 1997
http://www.lydsy.com/JudgeOnline/problem.php?id=1997 1997: [Hnoi2010]Planar Time Limit: 10 Sec Memo ...
- Spring Cacheable 注解不缓存null值
用Cacheable注解时,发现空值,也会被缓存下来.如果我们期望空值不被缓存,可以做如下设置: @Cacheable(key = "#id", unless="#res ...
- array_unshift() 函数
出处:http://www.w3school.com.cn/php/func_array_unshift.asp
- 2017ACM暑期多校联合训练 - Team 6 1002 HDU 6097 Mindis (数学)
题目链接 Problem Description The center coordinate of the circle C is O, the coordinate of O is (0,0) , ...
- Dijkstra算法(转)
基本思想 通过Dijkstra计算图G中的最短路径时,需要指定起点s(即从顶点s开始计算). 此外,引进两个集合S和U.S的作用是记录已求出最短路径的顶点(以及相应的最短路径长度),而U则是记录还未求 ...
- 011 CountDownLatch,CyclicBarrier和Semaphore
CountDownLatch(闭锁,有译倒计数,锁寄存): public class CountDownLatchTest { /*** 比如有一个任务A,它要等待其他4个任务执行完毕之后才能执行,此 ...
- 010 JVM类加载
转自http://www.importnew.com/23742.html 前言 我们知道我们写的程序经过编译后成为了.class文件,.class文件中描述了类的各种信息,最终都需要加载到虚拟机之后 ...