• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS——float属性及Clear:both备忘笔记

CSS——float属性及Clear:both备忘笔记

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,float属性等相关知识,佚名 希望在学习及工作中可以帮助到您
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果。Float的功能很强大,但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦。

使用Float样式,如果没有清除浮动,那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动,此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。

所以需要在样式定义的后面进行清除浮动,清除浮动的方法有几种:

Clear:both清除浮动

clear清除浮动主要是借用clear属性来清除浮动,这是一种比较陈旧的清除浮动方法,但是感觉一般遇到这种问题都会用这种方法去清除浮动。使用clear:both来清除浮动,我们需要在需要清除浮动地方的后面紧接着增加一个额外元素,比如说一个div标签,并且定义他们的样式为“clear:both”,其通常使用的结构方式如下:

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06css的margin缩写方式有效提高书写效率
  • 2017-08-06CSS属性display:inline-block用法深入理解
  • 2017-08-06IE6支持!important吗 如何用!important解决浏览器兼容性问题
  • 2017-08-06css样式无效是怎么回事?有哪些常见原因?
  • 2017-08-06你真的了解margin吗?你知道margin有什么特性吗?
  • 2017-08-06padding盒子内部文字跟盒子之间的距离
  • 2017-08-06使用CSS伪元素实现文字部分变色的方法
  • 2017-08-06基于CSS制作天蓝色导航菜单
  • 2017-08-06纯CSS3单页切换导航菜单界面设计的简单实现
  • 2017-08-06span设CSS样式总是不起作用的解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS学习中的瓶颈期深入分析
    • CSS的box-align属性控制子元素布局实例
    • Firefox下div层被Flash遮住的解决方法
    • CSS属性探秘系列(七):z-index
    • 利用css @viewport 做设备适配
    • 30个开发人员有用的CSS代码片段整理值得借鉴
    • CSS教程 伪清除浮动
    • 怎么用纯CSS制作带小三角的tooltip提示框
    • CSS中文字体对应的英文写法(常用整理)
    • HTML+CSS3 模仿Windows7 桌面效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有