三沣开发知识 购物推荐 网址导航 小说 美图 游戏 电影 图库 生肖星座 新闻 笑话 | IT开发 软件 手机 三沣软件 360图书馆 学霸网 装修
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> CSS/HTML/Xhtml -> 概述页面中浮动与清除浮动 -> 正文阅读

[CSS/HTML/Xhtml]概述页面中浮动与清除浮动

概述页面中浮动与清除浮动 本文主要对页面中浮动与清除浮动进行了概述,并举例说明,具有一定的参考价值,下面跟着小编一起来看下吧
一、float:主要目的是为了实现文本绕排图片的效果。
           也成了创建多栏布局最简单的方式。

<img src= “ ” />
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>

【1】文本绕排图片

  P {margin: 0; border: solid 1px;}
  img {float: left;}

【2】创建多栏布局

  P {margin: 0; border: solid 1px; width: 200px; float: left;}
  img {float: left;}

 二、浮动元素脱离了文档流,其父元素也看不到他了,因为也不会包围他,就会出现子元素有高度,而父元素不会被撑起,这时候并非我们想要,
下面有三种方法解决,请审时度势合理应用:

<section>
<img src=" />
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>


section , footer {border: solid 1px;}
img {float: left;}

【1】为父元素添加 overflow: hidden;强制父元素包围浮动元素
这样声明的真正用途是 防止父元素被超大内容撑开,应用overflow: hidden之后,父元素依然保持其设定的宽度,超大的子内容会被容器剪切掉
除此之外,overflow: hidden还有另外一个作用,即它能可靠地迫使父元素包含其浮动子元素。
不能在使用下拉菜单的顶级元素上使用,否则作为其子元素的下拉菜单就不会显示了。
【2】同时浮动父元素, 宽度100%与浏览器宽度同宽, 给footer设置清除浮动,使footer不会挤到section旁边去

  section {border: solid 1px; float: left; width:100%}
  footer {border: solid 1px; clear: left}
  img {float: left;}

不能在靠外边距自动居中的元素使用。否则不再居中。
【3】添加非浮动的清除元素(伪元素)

.clearfix: after {
  content: "";
  display: block ;
  height: 0
  visibility: hidden;
  clear : both
}

三、没有父元素时,如何清除(img p 作为一组 ,没有父元素)

<section>
  <img src=" />
  <p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
  <img src=" />
  <p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
  <img src=" />
  <p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>


.clearfix: after {
  content: "";
  display: block ;
  height: 0
   visibility: hidden;
  clear : both
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
上一篇文章      下一篇文章      查看所有文章
2017-01-11 01:57:58  
CSS/HTML/Xhtml 最新文章
基于HTML实现多图上传预览功能
概述页面中浮动与清除浮动
div宽度设置width:100%后再设置padding或ma
浅谈语义化的HTML结构到底有什么好处
CSS3文本阴影text-shadow属性详解
html页面公共样式(推荐)
标记语言——打印样式
防止用户将表单重复提交的方法汇总
html中隐藏域hidden的作用介绍及使用示例
HTML中select下拉框内容显示不全部分被覆盖
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频 装修知识库
2017-1-17 10:44:25
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库