html 清除浮动怎么写,清除浮动的css写法有哪些
本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码,非常不错,具有一定的参考借鉴价值,,需要的朋友可以参考下
一、float(浮动)是什么
float 属性定义元素在哪个方向浮动。
float:left 元素向左浮动。
float:right 元素向右浮动。
float:none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
float:inherit 规定应该从父元素继承 float 属性的值。
看一段简单的代码:
.child1 {
float: left;
height: 500px;
width: 70%;
background: #aa0;//黄
}
.child2 {
float: right;
height: 300px;
width: 30%;
background: #0aa;//青
}
.child3 {
background: #a0a;//紫
}
二、clear是什么
clear 属性指定段落的左侧或右侧不允许浮动的元素。
clear:left 在左侧不允许浮动元素。
clear:right 在右侧不允许浮动元素。
clear:both 在左右两侧均不允许浮动元素。
clear:none 默认值。允许浮动元素出现在两侧。
clear:inherit 规定应该从父元素继承 clear 属性的值。
比如上面的例子,我们为 child3 加上 clear: both; ,便可清除浮动。(child3的左右两侧都不允许浮动元素,自然而然不会再跟在俩浮动元素的屁股后面了~)
那么,只在一侧不允许浮动是怎样的呢?
本来是酱紫的:那么,只在一侧不允许浮动是怎样的呢?
本来是酱紫的:
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...
.child1 {
float: right;
background: #aa0;//黄
}
.child2 {
float: right;
background: #0aa;//青
}
然后,为 child2 加上 clear: right; ,在child2的右侧不允许浮动元素,所以child2就飘到了下一行。
那么,为 child1 加上 clear: left; 的时候,为什么不起效果呢?在这留个小彩蛋,欢迎大家留言讨论~
三、浮动带来的影响
浮动带来的最大影响就是,当父元素只包含浮动的子元素的时候,父元素的高度就会塌陷( height 变为 0 )。像酱紫:(parent高度为0,无法显示粉色背景)
.parent {
background: #FBC;//粉
}
四、清除浮动的方式
1. 在父元素中的结尾加一个空 div
div
.child1 {
float: right;
background: #aa0;
}
.child2 {
float: right;
background: #0aa;
}
可见,空 div 高度为0,位于父盒子的最下面,使父盒子重新撑起了应有的高度。
为什么要在最后加?倘若你在中间加,效果会是酱紫:
由于空 div 的左右都不允许浮动元素,那么它就会另起一段,导致盒子位置的效果就像 child2 清除右侧浮动一样, child2 跑到了 child1 下方。
2. 在父元素设置 overflow 属性
• 原理:设置 overflow:hidden 或 overflow:auto ,浏览器会自动检查浮动区域高度(才能知道父框的内容有无溢出)
• 优点:浏览器支持好
• 缺点:子元素若超出父元素尺寸会被隐藏,或者父元素出现滚动条
当设置 overflow:auto; 时,父元素会出现滚动条:
3.伪元素
• 原理:类似设置clear属性
• 优点:浏览器支持好,普遍
.clearfix{
zoom: 1; //zoom(IE专有属性)可解决ie6,ie7浮动问题
display: block;
}
.clearfix:after {
content: "."; //content: "";也可
visibility: hidden;
display: block;
height: 0;
clear: both;
}
更多CSS问题的相关技术文章,请访问CSS问题教程栏目进行学习!
html 清除浮动怎么写,清除浮动的css写法有哪些相关推荐
- css(float浮动和clear清除)
教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在di ...
- CSS中文档流之普通流,浮动及定位、浮动特性及清除浮动的方式、定位模式,子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
- CSS浮动(涉及到清除浮动)及易忽略的点
浮动float: 1.传统网页布局的三种方式: 普通流(标准流):标签按照默认方式进行排列,像块状元素(独占一行),从上向下顺序排列,eg:div,p标签.行内元素,从左到右顺序排列,像span,a, ...
- html中加入清除浮动,HTML中清除浮动的几种办法
为什么会有浮动 在一张HTML里,元素的排序方式遵循文档流.即是依次排序.从上到下,从左到右依次排序. 而脱离文档流就意味着不再遵循此规则.可以通过float与positon使得元素脱离文档流,当给一 ...
- 0基础快速入门CSS技术栈(6)—图解详细阐述说透CSS的浮动及应用、浮动的扩展及清除浮动和详解快速·1photoshop切图(附详细案例源码解析过程)2021-01-07更新
文章目录 1. 浮动(float)重点提炼 2. CSS 布局的三种机制 3. 为什么需要浮动? 3.1 example01 4. 什么是浮动(float) 4.1 作用 4.1.1 example0 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- Web前端入门学习(5)——浮动原理及清除浮动
浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
- css --- [读书笔记] 浮动(float) 与 清除浮动
说明 源代码 学习 1. 浮动 1.1 CSS布局的三种机制 网页布局的核心 - 利用 CSS 来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置: 标准流.浮动和定位. 标准流: 块级元素(div ...
- 为何要清除浮动?如何清除?
原因: 元素设置了float属性后,就会脱离文档流,当 包含框 的高度小于 浮动框 的时候,会出现高度塌陷.因此才需要清除浮动! 表现如图:包括框container已经包不住float的图片了! 清除 ...
最新文章
- pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。
- 使用 EF Core 的 EnableRetryOnFailure 解决短暂的数据库连接失败问题
- 10-MySQL-Ubuntu-数据表中数据的查询(三)
- 实现一个简单的文件上传进度条
- 提升ListView的运行效率
- anguarjs 上传图片预览_设计神器!图片批量压缩、格式转换、调整尺寸的在线工具...
- 让ie6(opera)支持微软雅黑字体
- c#数组赋初值_【自学C#】|| 笔记 13 数组
- mysql实现自动更新时间戳
- 谷歌浏览器和谷歌搜索_Google的搜索未来
- 【机器学习】一型模糊集和二型模糊集
- linux下doc转docx
- Nexus 6p 刷入TWRP和OPENGAPPS
- Worthington毒液中核酸外切酶的特征及相关文献
- c语言void要用什么头文件,什么是C语言头文件?
- 派森编程python_派森(Python)编程有什么用?
- mencoder常用参数总结
- 计算机汉字显示原理,计算机汉字显示原理
- python极客项目编程pdf微盘下载_《Python极客项目编程 》——2.4 完整代码
- python怎么应用在机械领域的国家砝码_2020尔雅通识课Python璇█搴旂敤答案获取...
热门文章
- python高级应用_Python高级编程技巧
- java集合性能_Java集合性能分析-疯狂Java讲义
- 局部钩子能防全局钩子吗_Django局部钩子和全局钩子
- java 判断端口是否被占用_java检测端口是否被占用详解
- 默认以管理员启动_如何始终以管理员身份运行 CMD 命令提示符和 PowerShell
- 选择 Python3.6 还是 Python 3.7
- thinkphp 第二节
- HTML data属性简介以及低版本浏览器兼容算法
- 第四章 分治策略 4.1 最大子数组问题 (暴力求解算法)
- (转)C#网络编程(订立协议和发送文件) - Part.4