CSS 解决Float后塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float示例</title>
<style>
#father{
background: red;
}
#son{
width: 50px;
height: 50px;
background: blue;
}
#second{
background: gray;
}
</style>
</head>
<body>
<div id="father">
<div id="son">子元素</div>
<p>这是父元素下面的一个p段落</p>
<div id="clear"></div>
</div>
<div id="second">这是第二个div</div>
</body>
</html>
2.Float之后的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float示例</title>
<style>
#father{
background: red;
}
#son{
width: 50px;
height: 50px;
background: blue;
float: left;
}
#second{
background: gray;
}
</style>
</head>
<body>
<div id="father">
<div id="son">子元素</div>
<p>这是父元素下面的一个p段落</p>
<div id="clear"></div>
</div>
<div id="second">这是第二个div</div>
</body>
</html>“`
CSS 解决Float后塌陷问题的更多相关文章
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 解决css的float父div没有高度
在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...
- after及before伪元素及解决父元素塌陷的几种方法
一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- CSS 浮动(float)与定位(position)
一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- 关于float高度塌陷问题
和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及 ...
- CSS 布局Float 【0】
float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...
- DIV+CSS解决IE6，IE7，IE8，FF兼容问题(转至http://www.douban.com/note/163291324/)
2011-07-25 21:11:47 DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...
随机推荐
- MYSQL基础知识的复习2
1.修改表中的数据 update 表名 set 要修改的字段 where 条件;-- 如果修改多个字段那么字段和字段之间用逗号隔开 2.查询(很重要) 1.查询表中部分字段: select 字段名,字 ...
- 关于java并发场景下，HttpServletRequst中session丢失问题
使用场景: 在list数据进来之后使用安全数组 Lists.newCopyOnWriteArrayList() 进行了 parallelStream 并行处理,在接口中进行了登录者信息接口 ...
- 大数据谢列3：Hdfs的HA实现
在之前的文章:大数据系列:一文初识Hdfs , 大数据系列2:Hdfs的读写操作 中Hdfs的组成.读写有简单的介绍. 在里面介绍Secondary NameNode和Hdfs读写的流程. 并且在文章 ...
- cisco思科交换机终端远程ssh另一端报错：% ssh connections not permitted from this terminal
故障现象: XSJ-GH10-C3750->ssh 58.64.xx.xx% ssh connections not permitted from this terminal 解决办法: 原因: ...
- JavaScript 实现排序算法
参考文章: 十大经典排序算法动画,看我就够了! 1. 冒泡排序 思路 比较所有相邻元素,如果第一个比第二个大,则交换它们 一轮下来,可以保证最后一个数是最大的 执行n-1轮,就可以完成排序 代码 Ar ...
- 向HDFS中上传任意文本文件,如果指定的文件在HDFS中已经存在,由用户指定是追加到原有文件末尾还是覆盖原有的文件
1 import java.io.FileInputStream; 2 import java.io.IOException; 3 import java.util.Scanner; 4 5 impo ...
- 拓扑排序（topo sort）之 最大食物链计数（ 洛谷P4017）
前言: 复习复习拓扑排序,自己把自己弄没了/kk 题目传送门 简化题意: 在一个DAG中,求从所有入度为0的点到所有出度为0的点路径的条数 md理解错题意把自己卡了半天,生物学的好的就可以直接理解为求 ...
- Flash图解线程池 | 阿里巴巴面试官希望问的线程池到底是什么？
前言 前几天小强去阿里巴巴面试Java岗,止步于二面. 他和我诉苦自己被虐的多惨多惨,特别是深挖线程和线程池的时候,居然被问到不知道如何作答. 对于他的遭遇,结合他过了一面的那个嘚瑟样,我深表同情(加 ...
- 项目action:前台传多个dataWrap给后台
业务描述:当前台需要向后台传递多个dataWrap时,需要给后台action加上一段方法,才可以获取到额外的dataWrap. @Override public List<String> ...
- juniper srx系列配置端口映射 转载
http://www.cnblogs.com/pinpin/p/9895815.html