码迷,mamicode.com
首页 > 其他好文 > 详细

浮动应用

时间:2018-08-06 21:07:36      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:splay   重叠   自适应   hid   rap   文档流   扩展   宽度   block   

浮动元素特性:

脱离文档流、具有块特性。

应用:

流式布局、自适应宽度、清除多余空隙。

(对于很多插件而言,浮动是个好特性)

缺点:

影响到其后元素布局及其包裹层高度。

(可能出现的结果是布局乱、元素高度获取不准确和重叠现象)

清除浮动:

1.浮层加宽度和overflow属性

(缺点是限制了子层元素的扩展,即你不处理人家是默认的 visible ,你这么一弄变 hidden 了,但是用起来真的很爽。。)

width:200px;

overflow:hidden;

2.父层加伪类处理

(用一个对大局无影响的点处理受浮动影响的部分)

.wrap{

  zoom:1

}

.wrap:after{

   clear:both;

  display:block;

          content:"";  

          visibility:hidden;
          height:0

}

 3.浮动元素其后加  br  标签 或者文档内位于浮动元素之后的标签,加样式:

clear:both;(left/right)

 

浮动应用

标签:splay   重叠   自适应   hid   rap   文档流   扩展   宽度   block   

原文地址:https://www.cnblogs.com/justSmile2/p/9432341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!