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 ...
随机推荐
- Django - WebSocket：dwebsocket
Django - WebSocket:dwebsocket 什么是WebSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换 ...
- Python执行程序实可视化_heartrate
最近发现了一个Python程序执行的简单实时可视化神器,名字叫 heartrate,安装完运行可以看到下面这样的炫酷过程. 虽然很炫酷,但有点看不懂. 来解释下,左边的动态数字代表每行被触发的次数.变 ...
- 理解js闭包9大使用场景
1.返回值(最常用) //1.返回值 最常用的 function fn(){ var name="hello"; return function(){ return name; } ...
- LocalDateTime去掉T
最近在使用阿里巴巴的fastjson反序列化对象的时候,对象里面时间格式属性总是会多了一个T 2021-1-09T18:29:09.097 这个T是啥国际标准,但是我们的前端又不需要这个T,所以就要 ...
- MySQL调优之索引优化
一.索引基本知识 1.索引的优点 1.减少了服务器需要扫描的数据量 2.帮助服务器避免排序和临时表 例子: select * from emp orde by sal desc; 那么执行顺序: 所以 ...
- 打开APP 04 | 网络通信：RPC框架在网络通信上更倾向于哪种网络IO模型？ 2020-02-26 何小锋
打开APP 04 | 网络通信:RPC框架在网络通信上更倾向于哪种网络IO模型? 2020-02-26 何小锋
- (转载)微软数据挖掘算法:Microsoft 关联规则分析算法(7)
前言 本篇继续我们的微软挖掘算法系列总结,前几篇我们分别介绍了:微软数据挖掘算法:Microsoft 决策树分析算法(1).微软数据挖掘算法:Microsoft 聚类分析算法(2).微软数据挖掘算法: ...
- TypeScript基本类型
类型注解 作用:相当于强类型语言中的类型声明 语法:(变量/函数):type 数据类型 新建src/datatype.ts,里面定义各种类型的数据 原始类型: let bool: boolean = ...
- P1837 单人纸牌
写在前面 感谢巨佬 yu__xuan 的帮助! 原本题解区的大佬们大都写的九层循环,其实此题如果写成状压,可以将这九层循环写成一层,非但简洁.代码可读性强,常数也比直接九维 dp 小. 算法思路 由于 ...
- 透明小电视上线——GitHub 热点速览 v.21.05
作者:HelloGitHub-小鱼干 这周的 GitHub Trending 真是棒极了.小鱼干喜欢的科技博主又开源了他的硬件玩具,一个透明的小电视机,HG 的小伙伴看完项目,再买个电路板和分光棱镜, ...