html除左侧浮动,html清除浮动的6种方法示例
使用display:inline-block会出现的情况:1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置的时候宽度由内容撑开
5.在IE6,7下步支持块标签
由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right
使用浮动时出现的情况:
1.使块元素在一行显示
2.使内嵌元素支持宽高
3.不设置不宽高的时候宽度由内容撑开
4.换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)
5.元素添加浮动,会脱离文档流,按照指定的一个方向移动,直到碰到父级的边界或者另一个浮动元素停止(文档流是文档中可显示对象在排列时所占用的位置)
无标题文档
div,span{height:100px;background:red;border:1px solid #000; float:left;}
/*
inline-block
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置宽度的时候宽度由内容撑开
5.在IE6,7下不支持块标签
浮动:
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
*/
span1
span2
下面的代码只有box1浮动,则box1,box2重叠一起。两者都浮动就不会重叠
无标题文档
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
清浮动的方法:
1.给父级也加浮动(这种情况当父级margin:0 auto;时不居中)
无标题文档
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
清浮动
1.给父级也加浮动(不居中了)
*/
2.给父级加display:inline-block;(同方法1,不居中。只有IE6,7居中)
无标题文档
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
*/
3.在浮动元素下加
无标题文档
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
3.在浮动元素下加
.clear{ height:0px;font-size:0;clear:both;}
*/
4.在浮动元素下加
无标题文档
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
3.在浮动元素下加
.clear{ height:0px;font-size:0;clear:both;}
4.在浮动元素下加
*/
5.给浮动元素父级加{zoom:1;}:after{content:""; display:block;clear:both;}
无标题文档
.box{margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{zoom:1;}
.clear:after{content:""; display:block;clear:both;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
3.在浮动元素下加
.clear{ height:0px;font-size:0;clear:both;}
4.在浮动元素下加
5. 给浮动元素的父级加{zoom:1;}
:after{content:""; display:block;clear:both;}
**在IE6,7下浮动元素的父级有宽度就不用清浮动
haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高
display: inline-block
height: (任何值除了auto)
float: (left 或 right)
width: (任何值除了auto)
zoom: (除 normal 外任意值)
*/
6.给浮动元素父级加overflow:auto;
无标题文档
.box{ width:300px;border:1px solid #000;overflow:auto;}
.div1{ width:260px;height:400px;background:Red;float:left;}
html除左侧浮动,html清除浮动的6种方法示例相关推荐
- 前端笔记(6)css布局机制,浮动,清除浮动,图片格式,ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...
- CSS——CSS浮动与清除浮动
文章目录 浮动 普通流(normal flow) 浮动(float) 什么是浮动? 浮动详细内幕特性 float 浮 漏 特 案例:体会浮动 现在就可以用float实现一些基本页面布局了 链接 清除浮 ...
- CSS---div盒子模型、相对绝对位置、float浮动、清除浮动
目录 一.初识盒子模型 二.div页面布局 1.绝对定位 position:absolute 2.相对定位position:relative 三.浮动(重点) 3.1标准流 3.2浮动 3.3浮动的特 ...
- html div元素浮动,CSS实现元素浮动和清除浮动的方法
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
- 【CSS学习(三)盒子模型、边距重叠 浮动、清除浮动】
盒子模型 盒子模型在CSS学习中尤为重要,对盒子模型的深刻理解有利于 CSS开发水平的提示,在开发中遇到难以理解的现象,往往是因为对模型的理解不够. 盒子模型这个名词来自英文里面的Box modelm ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- 进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
- html清除两端浮动,HTML中如何实现浮动与清除浮动
HTML中如何实现浮动与清除浮动 发布时间:2020-07-13 16:15:25 来源:亿速云 阅读:82 作者:Leah 这期内容当中小编将会给大家带来有关HTML中如何实现浮动与清除浮动,文章内 ...
- css浮动以及清除浮动
css浮动以及清除浮动 CSS的定位机制有3种:普通流(标准流).浮动和定位. 一.什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 选择器{f ...
- CSS之浮动/BFC/清除浮动(十二)
CSS 浮动/BFC/清除浮动 1,实现 CSS 布局的几种策略 2,正常布局流(Normal Flow) 2.1,正常布局流中,块级元素的排列方式 2.2,正常布局流中, 内联元素排版方式 3,浮动 ...
最新文章
- Go 学习笔记(36)— 基于Go方法的面向对象(封装、继承、多态)
- 基于OpenPose的人体姿态检测两个群众
- IBM对话智能+未来:十年提升AI性能效率千倍?
- python用户界面导入图片_python学习笔记之11:图像用户界面
- [LeetCode] Move Zeroes - 整数数组处理问题
- 【LeetCode】405 Convert a Number to Hexadecimal (java实现)
- 动态规划 HDU1231-------最大连续子序列
- python编程内置函数使用方法_Python内置函数 next的具体使用方法
- 当字段过长,鼠标移上去才展示全部,默认只展示部分防止表格比例发生变化
- 直流电机PID调节——P
- 硬盘是办公设备还是计算机设备,机械硬盘价格与区别【详细介绍】
- css怎么设置图片显示圆角,关于在css里设置图片圆角的问题
- 互联网公司的裁员,能玩出多少种花样?
- Rush rush 。◕.◕。
- NPN增量型编码器接线原理及测试
- 【Qt开发】编译时报“undefined reference to“问题的解决方案
- 度秘语音引擎app_「资源」9个(实时)语音转文字APP分享(推荐收藏)
- JNI系列(一)JNI简介
- java编程APP_用java编程的软件叫什么?
- 股票个人交易接口源码分享
热门文章
- Verilog_寻找最高有效位的位置
- Nexys4DDR手写数字图像识别
- mysql数据库sql审核_Inception SQL审核注解
- 如何降低Windows Server 2008的IE安全级别?
- HttpApplication类及派生的Global类
- Maven环境搭配及继承
- poj1201/zoj1508/hdu1384 Intervals(差分约束)
- Ruby中require,load,和include的区别
- 红杉树信息助力XToolsCRM “SaaS”领域的巨人联盟
- mysql中数据库覆盖导入的几种方式