css浮动,定位问题解答

1、浮动的元素有什么特征?对父容器及其子元素、普通元素、文字有什么影响?

浮动的元素在不清除浮动的情况下会脱离正常的文档流,将不再文档流中占据位置;
如果浮动的元素为子元素的情况下父元素没有定义固定宽度和高度则父元素降抓取不到浮动的子元素的内容,造成父元素的塌陷;

由于元素浮动后不在占据文档流的位置,所以与其相邻的兄弟元素则会被浮动的元素覆盖,如果兄弟元素也进行了浮动那么将会紧跟在上一浮动元素后面;(如果想让未浮动的兄弟元素覆盖在以浮动的元素上那么久要用到z-index配合定位来解决这个问题);如果浮动后父元素宽度已经不能容纳浮动后水平的所有子元素的宽度那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住;如果浮动的元素高度不相同当元素下移时下移的元素会卡在高度最小的不下移元素;

对于文字,如果两个兄弟元素第一个进行了浮动,第二个有内容且没有进行浮动那么除了第一个元素将覆盖第二个元素外,第二个元素的文字将会围绕第一个以浮动元素的四周进行显示;

如果一个内联元素浮动后即使清除了浮动,此内联元素就可以设置width,height,margin,padding 值;

2、清除浮动指的是什么?如何清除以及方法?

浮动后的元素需要清除浮动,让原本已经脱离正常文档流的元素重新回归正常文档流当中,避免塌陷;
对于css有一个特定的清除浮动的属性此属性 clear 具有三个常用值分别为:left、right、both;代表清除左边浮动、清除右边浮动、浮动全部清除;一般常用的是clear:both; 此方法可用在最后一个浮动的元素下在增加一行代码来清除:
<div class="big">
<div style="float: left"></div>
<div style="float: left"></div>
<div style="float: left"></div>
<div style=" clear: both;"></div>
</div>

另外除了上面的方法还有一些清除浮动的方法在BFC模式下利用以下方法均可:
float为 left|right;
overflow为 hidden|auto|scroll;
display为 table-cell|table-caption|inline-block;
position为 absolute|fixed;

3、有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景分别是?

常用的positionde的值如下图:

微信截图_20170724100820.png

常用的值有三个分别是:position: relative; position: absolute; position: fixed;
position: relative: 使用场景一般为relative可能就要相对于父结点进行定位了一般都是相对定位;
position: absolute:需要把一个元素始终固定在页面的一个位置时使用;
position: fixed:比如有些div悬浮在上方,可能就需要fixed,也就是滚动条移动时不会改变与浏览器的位子;

4、position:relative和负margin都可以使元素位置发生偏移二者区别是什么?

position:relative;是根据元素目前的位置进行定位,利用left,right,top,bottom进行位置的改变是针对元素本身来移动并且原来的位置依然占位;
负margin会把元素上移、左移,同时文档流中的位置也发生相应变化,但是不在占据原来的位置;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • 一、文档流的概念指什么?有哪些方式可以让元素脱离文档流? 文档里指元素在文档中的位置由元素在html里的位置决定,...
    dengpan阅读 495评论 0 3
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,165评论 0 6
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 何谓浮动元素?有什么特征?所谓浮动...
    草鞋弟阅读 786评论 0 1
  • 今天心情好,码个总结,捋捋今年的收获。 生命中多点仪式感也是好的。 思维心态 今年在思维心态上的收获有五点。 1)...
    喵喵僧阅读 436评论 2 6