码迷,mamicode.com
首页 > Web开发 > 详细

CSS中float专题

时间:2018-06-28 19:21:17      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:移动   clear   width   分享   失效   标准   src   size   tab   

float的讲解:

初衷 例子 原理
实现图片文字的环绕效果 技术分享图片

通过float,跳出了包裹自己的盒子,合盒子里面没有内容,那么height变为0;那么紧跟着本盒子的其他盒子就会往上移动,但是float后的元素并没有跳出文本流中,任然占有文本流的空间,其他盒子网上移动的过程中float后的内容就会去自动去拼接上移盒子中的内容,(但是两部分内容是独立的,可以通过margin: 0 50px 5px 0; 来设置间距)因此就会出现文字环绕的效果。

 

如何实现只浮动,盒子高度不为0呢?(清出浮动的影响)

  p { clear: both; } ;在紧接着浮动的元素上加上该样式;
效果是:让装有浮动的盒子保持高度;


1、flaot以后,display的值变为:block;还会去除空格;

2、flaot和position:relative同时使用:
.t2{
background-color: red;
position: relative;
top: 50px;
right: -50px;
float: right;
}
效果为:先在原来的位置相对偏移以后,在执行float的浮动效果,都没有脱离标准流;

3、如果position:absolute,和float同时出现的话,那么float失效,因为position:absolute是将元素脱离了标准流;所以flaot不起作用。

补充:加了定位(position)以后,层高于标准流中的值;

CSS中float专题

标签:移动   clear   width   分享   失效   标准   src   size   tab   

原文地址:https://www.cnblogs.com/helei747123/p/9239941.html

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