未加星标

概述页面中浮动与清除浮动

字体大小 | |
[前端(html5) 所属分类 前端(html5) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

一、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
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

主题: 浏览器
分页:12
转载请注明
本文标题:概述页面中浮动与清除浮动
本站链接:http://www.codesec.net/view/522294.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(html5) | 评论(0) | 阅读(79)