CSS深入理解之float浮动_学习笔记

首页免费课 CSS深入理解之float浮动笔记

CSS深入理解之float浮动

                
                张鑫旭
            页面重构设计

                    查看讲师更多课程 
                    张鑫旭讲师的其他课程
                
CSS深入理解之border
中级·56801
免费课程
                                
CSS深入理解之padding
中级·52482
免费课程
                                
CSS深入理解之margin
中级·55944
免费课程
                                
CSS深入理解之z-index
中级·40882
免费课程
                                
CSS深入理解之relative
中级·47920
免费课程
                                
CSS深入理解之vertical-align
中级·39338
免费课程
                                
                难度初级
            
                时长50分
            
                学习人数
            
综合评分9.17
                            369人评价
                        查看评价
                                9.5
                                内容实用
                            
                                9.1
                                简洁易懂
                            
                                8.9
                                逻辑清晰

最热最新

elaine2 00:29

浮动会让父元素高度塌陷，这是标准，浮动的原本特性是实现文字的环绕效果。

查看全部

0 采集收起来源：被误解的float浮动
2015-08-25
往来

浮动block化

查看全部

0 采集收起来源：float浮动的滥用
2015-08-20
往来

float导致父容器被破坏，明显的变化就是没有高度了

查看全部

0 采集收起来源：float特性-包裹与破坏
2015-08-20
往来

block formatting context

查看全部

0 采集收起来源：float特性-包裹与破坏
2015-08-20
朝夕v8

浮动使父元素高度塌陷是标准，当父元素高度塌陷后，置于父元素下的元素没有限制会在空间允许的条件下浮动上来，这就是文字环绕图片的原因；或者是图片位于文字之间，图片的浮动会使其突破父元素向左或右浮动后文字拼接呈环绕效果（浮动的破坏性只是为了实现文字环绕效果）

查看全部

0 采集收起来源：被误解的float浮动
2015-08-18
boffa

【CSS】【清除浮动(带来的影响)】方法一：在底部插入clear:both 1.HTML block水平元素放置于底部 <div ...></div> 2.CSS after伪元素在底部生成 .clearfix:after{} 方法二：父元素BFC(IE8+)或haslayout(IE6/IE7) float:left/right position:absolute/fixed overflow:hidden/scroll(IE7+) display:inline-block/table-cell(IE8+) width/height/zoom:1/...(IE7/IE7) ★由于以上两个方法各有缺点所以：权衡后的策咯 .clearfix:after{content:''; display:block; height:0; overflow:hidden; clear:both;}(IE8+) .clearfix{*zoom:1;} (IE6/IE7) 或 .fix:after{} .fix{} ★更好的方法： .clearfix:after{content:''; display:table; clear:both;}(IE8+) .clearfix{*zoom:1;} (IE6/IE7) ★切勿滥用 .clearfix只应用在包含浮动子元素的『父级元素』上

查看全部

0 采集收起来源：清除浮动
2018-03-22
朝夕v8

float特性包裹与破坏包裹：1收缩：水平方向使其宽度收缩 2坚挺：竖直方向 3隔绝：里面的东西发生的任何事情对外面没有任何影响（bfc:块级格式化上下文）具有包裹性的其他小伙伴： 1. display: inline-block/table-cell/... 2. position: absolute（近亲）/fixed/sticky 3. overflow: hidden/scroll 破坏（父级元素高度被破坏，高度塌陷）（浮动是魔鬼）具有破坏性的其他小伙伴： 1. display: none 2. position: absolute（近亲）/fixed/sticky

查看全部

0 采集收起来源：float特性-包裹与破坏
2015-08-18
朝夕v8

float最初的设计初衷是做文字环绕效果

查看全部

0 采集收起来源：float的历史
2015-08-18
huanglu

float最初的设计初衷是做文字环绕效果

查看全部

0 采集收起来源：float的历史
2015-08-12
monkeyleo

用clear清除浮动，会发生margin重叠显现，而BFC清除浮动，则会把整个元素包起来，从而不会发生margin重叠现象！

查看全部

0 采集收起来源：clear与margin重叠
2015-08-10
凌凌酒

1.用clear清除浮动(在浮动元素的底加入div且设置clear:both;)，会发生margin重叠显现 2.用BFC清除浮动(在浮动元素的父元素上加入overflow: hidden;)，则会把整个元素包起来，从而不会发生margin重叠现象

查看全部

0 采集收起来源：clear与margin重叠
2015-08-08
milan7

.clearfix:after{}用在父元素上

查看全部

0 采集收起来源：清除浮动
2015-08-05
code前端

js操作css获得浮动样式发现float属性在IE和firefox下对应的js脚本是不一样的，IE下对应得是 styleFloat，firefox,chorme,safari下对应的是cssFloat，可用in运算符去检测style是否包含此属性。 var float-style = (cssFloat in object.style) ? cssFloat : styleFloat;

查看全部

0 采集收起来源：Float与流体布局
2015-08-03
code前端

设置浮动的影响： 1.可以使元素block块状化 2.破坏性造成的紧密排列特性（去空格化） 3.滥用浮动容易造成砌砖布局，砌砖布局的问题 1.容错性比较糟，容易出问题，错位 2.这种布局需要元素固定尺寸，很难重复使用 3.低版本IE下会有很多问题

查看全部

0 采集收起来源：float浮动的滥用
2015-08-03
code前端

【清除浮动(带来的影响)】方法一：在父元素内部插入带有clear:both;的一个空标签 clear通常应用形式 1.HTML block水平元素放置于底部 <div ...></div> 2.CSS after伪元素在底部生成 .clearfix:after{} 方法二：父元素BFC(IE8+)或haslayout(IE6/IE7) float:left/right position:absolute/fixed overflow:hidden/scroll(IE7+) display:inline-block/table-cell(IE8+) width/height/zoom:1/...(IE7/IE7) ★由于以上两个方法各有缺点所以：权衡后的策咯 .clearfix:after{content:''; display:block; height:0; overflow:hidden; clear:both;}(IE8+) .clearfix{*zoom:1;} (IE6/IE7) 或 .clearfix:after{content:"";display:table;clear:table;} .clearfix{*zoom:1;} ★更好的方法： .clearfix:after{content:''; display:table; clear:both;}(IE8+) .clearfix{*zoom:1;} (IE6/IE7) ★切勿滥用 .clearfix只应用在包含浮动子元素的『父级元素』上

查看全部

0 采集收起来源：清除浮动
2018-03-22