【CSS】clear清除浮动
clear清除浮动
1、作用:
规定元素的某一侧不允许存在浮动元素
2、值:
3、应用:
清除其他浮动元素对其产生的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动的应用</title>
<style>
#box-a{
width: 200px;
height: 200px;
background-color: red;
float: left;
} #box-b{
width: 300px;
height: 300px;
background-color: #ff0;
float: right;
} #box-c{
width: 800px;
height: 100px;
background-color:blue;
clear:right;
}
</style>
</head>
<body>
<div id="box-a">box a</div>
<div id="box-b">box b</div>
<div id="box-c">box c</div>
</body>
</html>
4、原理:
设置了clear的元素将不再像前一个浮动元素对齐，换行重新开始。
5、实际应用
解决网页中的“塌陷”问题
什么是塌陷:如果父元素只包含浮动元素，那么在未设置高度的同时，则父元素高度塌缩为零。(PS:浮动元素只会影响跟它同级别的元素，由于父元素高度塌陷为0，则跟父元素同级别的且位于父元素后面的其他元素位置也会发生上移)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>容器的塌陷</title>
<style>
.wrap{
border:10px red solid;
} .main{
width:30%;
background-color:#ff0;
height:150px;
} .aside{
width:50%;
background-color:#76D8DD;
height: 200px;
} .main,.aside{
float: left;
} .div1{
background-color: blue;
border: solid 1px green;
height:100px;
} .clearfix{
/*zoom属性:IE浏览器的专用属性，是IE浏览器自己写的，火狐浏览器不用写这一句，
这一句是专门针对老版本的IE浏览器所写的，为了兼容*/
zoom: 1;
} /* :after 伪对象选择符—在这个对象被浏览器渲染后添加一定的内容 */
.clearfix:after{
content: ".";/*content属性:添加的内容写在这里属性的值里面，这个属性是专门配合伪对象滴，必须写！就算值为空也必须写！*/
display: block;/*将添加进去的内容转换为块状元素*/
visibility:hidden;/*visibility：可视化属性，控制元素是否可见，但无论是否可见，都保留其物理空间(与display:none的比较)*/
height: 0;/*将添加进去的内容高度设置为0，消除其占位*/
clear: both;/*将添加进去的内容作为清除浮动的对象，实现外围容器中有内容存在，因此可以自动判定高度，解决塌陷*/
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="main">main</div>
<aside class="aside">aside</aside>
</div>
<div class="div1"></div>
</body>
</html>
【CSS】clear清除浮动的更多相关文章
- CSS clear清除浮动
1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...
- CSS clear 清除浮动，兼容各浏览器
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clear{zoom ...
- 【css】清除浮动（clearfix 和 clear）的用法
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
- HTML&CSS基础-清除浮动
HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...
- day68-CSS-float浮动，clear清除浮动，overflow溢出
1. float 浮动 1.1 在 CSS 中,任何元素都可以浮动. 1.2 浮动元素会生成一个块级框,而不论它本身是何种元素.内联标签设置浮动,就变成了块级标签. 1.3 关于浮动的两个特点: 浮动 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
随机推荐
- 解决 引入本地jar包后 maven无法编译的问题及部署war包缺失本地jar包的问题
参考:https://blog.csdn.net/wang864676212/article/details/82626922 pom.xml 引入 <plugin> <plugin ...
- [SHOI2015]聚变反应炉[树dp、贪心]
题意 给定一棵 \(n\) 个点的树,每个点有一个启动能量 \(d\) 和传递能量 \(c\) ,如果一个点被启动了,就会向和他直接相连的点发送 \(c\) 的能量,初始所有节点能量为0,问最少多少能 ...
- MQ见解
MQ 消息队列是系统级.模块级的通信.RPC是对象级.函数级通信. 1) 什么是推模式,什么是拉模式 2) 有没有消息丢失情况,如何防止 3) MQ用来解决什么问题 4) 你们用的什么MQ,为什么要用 ...
- 设计模式 笔记 责任链模式 chain of responsibility
//---------------------------15/04/25---------------------------- //Chain of responsibility 责任链----- ...
- Unity---Inspector面板自定义
一. 参数自定义 一个含有成员的类Player using System.Collections; using System.Collections.Generic; using UnityEngin ...
- idou老师教你学Istio ：如何用istio实现监控和日志采集
大家都知道istio可以帮助我们实现灰度发布.流量监控.流量治理等功能.每一个功能都帮助我们在不同场景中实现不同的业务.那Istio是如何帮助我们实现监控和日志采集的呢? 这里我们依然以Bookinf ...
- 每日scrum(6)
今天是小组正式冲刺的第六天,软件的各种结尾工作,还有一些模块就已经全部实现了: 遇到的问题主要是对于自己能力的担忧,以前总是想,如果自己努力,就会怎样成功,其实并不是那样,小小的距离就是很远的能力差距 ...
- mac下mongoDB的使用
第一步: 我们在网上找到mongoDB的安装文件包,下载下来然后放在mac系统的指定位置,如图所示: 第二步:打开数据库服务端 我们在bin目录下执行mongod这个命令: 首先cd到bin目录 然后 ...
- 利用mask-image蒙层编写异形头像
需求:后台给了一个规规矩矩的头像,或圆或方,UI要求展示成水滴的形状.正在想到底如何实现的时候,不由自主去翻了鑫神的博客,正好找到了答案,窃喜(·_·) UI给的形状: 后台给的头像(忽略橙色背景色, ...
- 2-Python3从入门到实战—基础之运算符
Python从入门到实战系列--目录 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 算术运算符 Pyt ...