三沣开发知识 购物 网址 游戏 小说 离线地图 股票 美女 新闻 笑话 | 汉字 软件 图片 日历 阅读 下载 图书馆 开发 租车 短信 China
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
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
  CSS/HTML/Xhtml 最新文章
HTML页面源代码布局介绍_动力节点Java学院整
什么是HTML_动力节点Java学院整理
HTML中div和span比较_动力节点Java学院整理
HTML图片img标签_动力节点Java学院整理
HTML使用canvas实现弹幕功能
HTML name id和class的区别_动力节点Java学
HTML教程:有序列表
网页表格分割线去除方法
HTML网页超链接标记
img图片标签赋予alt属性是否需要
上一篇文章      下一篇文章      查看所有文章
加:2017-01-11 01:57:58  更:2017-05-14 03:26:47 
 
技术频道: 站长资讯 .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 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年9日历
2017-9-22 21:33:43
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库