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 ...
随机推荐
- 09--Docker 安装tomcat9
1.在hub.docker.com中获取tomcat拉取地址 docker pull tomcat:9.0.41-jdk8-corretto 2.查看Dockerfile 中WORKDIR 为/use ...
- centos7.4使用filrewalld打开关闭防火墙与端口
1.firewalld的基本使用启动: systemctl start firewalld关闭: systemctl stop firewalld查看状态: systemctl status fire ...
- POJ1629:picnic planning
题目描述 矮人虽小却喜欢乘坐巨大的轿车,轿车大到可以装下无论多少矮人.某天,N(N≤20)个矮人打算到野外聚餐.为了 集中到聚餐地点,矮人A 有以下两种选择 1)开车到矮人B家中,留下自己的轿车在矮人 ...
- Spring Security，没有看起来那么复杂（附源码）
权限管理是每个项目必备的功能,只是各自要求的复杂程度不同,简单的项目可能一个 Filter 或 Interceptor 就解决了,复杂一点的就可能会引入安全框架,如 Shiro, Spring Sec ...
- 一文搞定全场景K3s离线安装
作者简介 王海龙,Rancher中国社区技术经理,负责Rancher中国技术社区的维护和运营.拥有6年的云计算领域经验,经历了OpenStack到Kubernetes的技术变革,无论底层操作系统Lin ...
- Redis连接池的相关问题分析与总结
https://mp.weixin.qq.com/s/juvr89lAvM0uuDmyWyvqNA 阿里干货课堂丨Redis连接池的相关问题分析与总结 原创 技术僧 Java进阶与云计算开发 2018 ...
- 从epoll构建muduo-1 mini-muduo介绍
https://blog.csdn.net/voidccc/article/details/8719752 ========== https://blog.csdn.net/liangzhao_jay ...
- 【LinuxShell】wget 命令详解
参数 待补充 返回值 code means 0 No problems occurred 1 Generic error code 2 Parse error - for instance ...
- 设计模式c++（5）——工厂模式
工厂方法模式定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类把实例化推迟到子类. 总的来说,就是工厂方法模式封装了对象的创建,通过让子类决定该创建的对象是什么,来达到将对象创建 ...
- CS229 Lecture 02
最近忙成狗,各种意义上.第二章其实之前已经看过了但是已经完全忘记了,于是重新看了一遍当复习. 判别学习算法:直接学习$p(y|x)$,或学习一个假设$h_{\theta}(x)$输出结果 生成学习算法 ...