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 ...
随机推荐
- 手动添加Ini4idea，解决pycharm无法打开ini文件
1. 查看本地pycharm的版本号 help -> about 2. 进入官网:http://plugins.jetbrains.com,选中pycharm及相关版本,搜索ini,切到版本,下 ...
- Flink可靠性的基石-checkpoint机制详细解析
Checkpoint介绍 checkpoint机制是Flink可靠性的基石,可以保证Flink集群在某个算子因为某些原因(如 异常退出)出现故障时,能够将整个应用流图的状态恢复到故障之前的某一状态,保 ...
- error: Failed dependencies: rpm安装包失败报错依赖包
error: Failed dependencies: mysql-community-release conflicts with (installed) mysql57-community-rel ...
- 将HDFS中指定文件的内容输出到终端。
1 import java.io.*; 2 import org.apache.hadoop.conf.Configuration; 3 import org.apache.hadoop.fs.*; ...
- Go Concurrency Patterns: Pipelines and cancellation
https://blog.golang.org/pipelines Go Concurrency Patterns: Pipelines and cancellation Sameer Ajmani1 ...
- Linux常用命令：文件操作命令
Linux系统命令主要包括文件操作.网络命令和性能命令,本文介绍常用文件操作命令. 修改文件属性 文件类型: 普通文件:- 目录文件:d 块设备文件:b,硬盘 字符设备: c,串行端口的接口设备,例如 ...
- Prometheus自定义监控内容
Prometheus自定义监控内容 一.io.micrometer的使用 1.1 Counter 1.2 Gauge 1.3 Timer 1.4 Summary 二.扩展 相关内容原文地址: 博客园: ...
- hibernate学习笔记（1）结构与基本数据类型
一,概览 Hibernate负责从Java类到数据库表的映射,以及从Java数据类型到SQL数据类型的映射.另外还提供数据查询和检索功能.它可以显着减少在SQL和JDBC中手动处理数据的开发时间. ...
- linux最初配置( vimrc设置 、tab键设置 inputrc、中文输入法等等)
1..vimrc设置 syntax on set tabstop=4 set softtabstop=4 set autoindent set cindent set nu set ruler & ...
- MongoDB：原来我如此简单
为什么要使用 MongoDB 张三大学毕业设计题目是<XXX博客论坛>,他在存储用户评论的时候遇到了一个问题:这些评论数据量非常大,但是价值不是很大,如果存储在 MySQL 数据库中就会浪 ...