css清除浮动float
一、浮动产生原因
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,
导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。
本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,
所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。
简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。
二、浮动产生负作用
1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示
三、css解决浮动,清除浮动方法
当给两个div:left,right。加上float属性时可以看出div已经脱离文档流。.center已经起不了作用。
<!DOCTYPE html>
<html>
<head>
<meta charset=``"utf-8"``>
<title>css浮动</title>
<style>
.``center``{
margin``: ``0px``;
width``: ``1200px``;
border``: ``2px
solid
red``;
margin``: ``0px
auto``;
}
.``left``{
height``: ``300px``;
width``: ``300px``;
background``: wheat;
display``: inline-``block``;``/*首先这两个div都是块级元素先转换为行内元素*/
float``: ``left``;``/*给左边的div加上float:left; div会往左浮动*/
}
.``right``{
height``: ``300px``;
width``: ``300px``;
background``:aquamarine;
display``: inline-``block``;``/*首先这两个div都是块级元素先转换为行内元素*/
float``:``right``;``/*给左边的div加上float:right; div会往右浮动*/
}
</style>
</head>
<body>
<div class=``"center"``>
<div class=``"left"``>我是左浮动</div>
<div class=``"right"``>我是右浮动</div>
</div>
</body>
</html>
|
最后,给大家推荐一个前端学习进阶内推交流群685910553(前端资料分享),不管你在地球哪个方位,
不管你参加工作几年都欢迎你的入驻!(群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档!)
如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思,那么请分享并转发,或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路,越走越远。
css清除浮动float相关推荐
- css清除浮动float的三种方法总结
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"><div class="div ...
- HTML如何消除别的块的影响,CSS清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?...
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: 1 2 3 分析CSS代码样式: .outer{border: 1px solid #ccc;background: ...
- css 清除浮动float 嗒嘀嗒滴 ----20181120
手动给父元素添加高度 通过clear清除内部和外部浮动 给父元素添加overfloat属性并结合zoom:1使用 给父元素添加浮动 常用方法: ①```给兄弟元素添加clear属性:添加一个class ...
- CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
- CSS清除浮动 清除float浮动
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级 对象盒子不能被撑开,这样CSS float浮动就产生了. 1.背景不能显示 由于浮动产生,如果对父级设置了(CSS b ...
- CSS清除浮动(float)的三种方式
标题CSS清除浮动(float)的三种方式 为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在画面上.我们一般布局都是只设置宽度不设置高度,让内容来填充高度.但利用浮动后会让原本填充的高度消失 ...
- CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- 活学活用,CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
- 如何清除浮动(float)所带来的影响
清除浮动(float) 1.定义和用法 在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素 ...
最新文章
- android 弹幕时间戳,【存档】B站直播数据包分析连载(2018-12-11更新/2020-04-12废止)...
- Yann LeCun力挺观点:算法对AI提升不大,奇点仍然很遥远
- Android自定义水波纹动画Layout
- 《JavaScript DOM 编程艺术》 读书笔记
- Struts2框架使用(十)之struts2的上传和下载
- tika设置文件长度限制_MySQLInnoDB某些你没注意过的限制
- Python的threadpool模块
- 练习:写一个脚本,完成以下任务
- python将图片导出数据库_python 将图片转换为base64编码转储进数据库
- antdesignpro 重定向到登录页面_URL重定向跳转绕过
- 微信js-sdk集成小结
- 作为一名管理者,如何做好上传下达工作呢?
- 简易编程入门Part1
- 一文读懂keepalive的工作原理
- 海面电磁散射MATLAB程序,matlab 电磁散射特性计算
- ubuntu 20.04安装各类软件
- dp 这个单位是安卓发明的么?为什么 px=dp*(dpi/160)?
- 分享一下 各类学习网站
- 苹果cmsv10仿韩剧网好看的高端简约免费自适应模板
- Azure RTOS ThreadX 移植 STM32H743
热门文章
- QT报错:Gtk-Message:Failed to load module “gail“
- 瑞星2005升级问题汇总
- 服务器普通硬盘,服务器硬盘和普通硬盘区别
- Vue Echarts英文版地图——强大的高德地图
- 【mysql】查询中英文名称拼接处理
- html如何改变字体的位置,css如何改字位置
- kafka 四:(设计模式)Kafka数据上传至Hbase
- hugegraph图数据库索引详解
- 最详细的App自动化常用的元素审查器
- 10月25日 c语言 读取7个数(1—50)的整数值,每读取一个值,程序打印出该值个数的*