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 ...
随机推荐
- ClickHouse入门：表引擎-HDFS
前言插件及服务器版本服务器:ubuntu 16.04Hadoop:2.6ClickHouse:20.9.3.45 文章目录 简介 引擎配置 HDFS表引擎的两种使用形式 引用 简介 ClickHous ...
- Django Signals
信号 Django中提供了"信号调度",用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. Django内置的信号 Model si ...
- MySQL调优用户监控之show processlist
简介 show processlist显示这台MySQL正在连接的用户: mysql> show processlist; +----+------+-----------+-------+-- ...
- 京东热 key 探测框架新版发布，单机 QPS 可达 35 万
https://mp.weixin.qq.com/s/3URAvUF6zwxeF5Kkc1aWHA 京东热 key 探测框架新版发布,单机 QPS 可达 35 万 原创 Hollis Hollis 2 ...
- spring boot 启动 开启注解 加载 bean
业务描述:创建一个cache类然后交给spring 管理. @Component @Scope("singleton") public class Cache { public C ...
- 长连接 短连接 RST报文
https://baike.baidu.com/item/短连接 短连接(short connnection)是相对于长连接而言的概念,指的是在数据传送过程中,只在需要发送数据时,才去建立一个连接,数 ...
- Redis 实战 —— 10. 实现内容搜索、定向广告和职位搜索
使用 Redis 进行搜索 P153 通过改变程序搜索数据的方式,并使用 Redis 来减少绝大部分基于单词或者关键字进行的内容搜索操作的执行时间. P154 基本搜索原理 P154 倒排索引 (in ...
- Java基础图解，JVM，线程，Spring，TCP，SpringMVC等开发体系图解
Java基础图解,JVM,线程,Spring,TCP,SpringMVC等开发体系图解 1.Java虚拟机运行时数据区图 2. 堆的默认分配图 3.方法区结构图 4.对象的内存布局图 5.对象头的Ma ...
- Dbeaver 连接 phoenix
Dbeaver 连接 phoenix 1.新建连接 2.选择连接类型Phoenix 3.设置驱动 4.准备驱动包 5.添加驱动 6.添加 Zookeeper Base Path 7.找到驱动类 8.配 ...
- 学习笔记 Hadoop的job提交过程，shuffle过程以及HA机制的实现
一,在hadoop中的mapreduce的job提交过程比较繁琐,但掌握job的提交过程是我们进入深入学习的必要. 二,mapreduce的shuffle机制 三,Hadoop的HA机制.