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
                                逻辑清晰

最热最新

阿豆和猫小姐

clear与margin会有像素重叠

查看全部

0 采集收起来源：clear与margin重叠
2015-10-15
叮叮咚锵

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

查看全部

0 采集收起来源：float浮动的滥用
2015-10-12
叮叮咚锵

【清除浮动(带来的影响)】方法一：在父元素内部插入带有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
叮叮咚锵

无宽度，无图片，无浮动

查看全部

0 采集收起来源：float特性-包裹与破坏
2015-10-12
叮叮咚锵

【CSS】【Float的特性：包裹与破坏】 1.包裹：收缩（水平方向），坚挺（高度），隔绝（与外部不相关）具有包裹性的其他属性【Block Formatting context -- 块级格式化上下文】 display;inline-block/table-cell/.. position:absolute(近亲)/fixed/sticky overflow:hidden/scroll 2.破坏:容器被破坏（父元素高度塌陷）具有破坏性的其他属性 display:none position:absolute(近亲)/fixed/sticky

查看全部

0 采集收起来源：float特性-包裹与破坏
2015-10-12
mlyknown 07:45

左右两侧自适应。不环绕

查看全部

0 采集收起来源：Float与流体布局
2015-10-09
xu0302 02:17

具有包裹特性的

查看全部

0 采集收起来源：float特性-包裹与破坏
2015-10-08
22不小了

var btnShow = document.getElementById("btnShow"), btnAdd = document.getElementById("btnAdd"), result = document.getElementById("result"), first = document.getElementById("first"); if (btnShow && btnAdd && result) { btnShow.onclick = function() { // 获得该按钮的display值 var display = this.currentStyle? this.currentStyle.display: window.getComputedStyle(this, null).display; // 显示结果 result.innerHTML = display; result.parentNode.removeAttribute("hidden"); // repain fix IE7/IE8 bug document.body.className = "any"; }; // 设置浮动按钮的点击事件 btnAdd.onclick = function() { btnShow.style["cssFloat" in this.style? "cssFloat": "styleFloat"] = "left"; // 文字描述的变化 this.value = "上面的按钮已经设置了float:left"; btnShow.value = "再次点击我确认display属性值"; first.innerHTML = first.innerHTML.replace("没有", '<del>没有</del>'); // 结果隐藏 result.parentNode.setAttribute("hidden", ""); // 按钮禁用 this.setAttribute("disabled", ""); }; }

查看全部

0 采集收起来源：浮动与display:block化
2018-03-22
22不小了

if (trigger && length > 0) { trigger.onclick = function() { for (var index = 0; index < length; index += 1) { buttons[index].style["cssFloat" in trigger.style? "cssFloat": "styleFloat"] = "left"; } }; }

查看全部

0 采集收起来源：float浮动去空格
2018-03-22
22不小了

（1）在线代码测试工具：http://www.lvyestudy.com/tools/run_code.aspx；（2）在线调色板：http://www.lvyestudy.com/tools/color_picker.aspx；（3）CSS3圆角生成器：http://www.lvyestudy.com/tools/border_radius.aspx

查看全部

0 采集收起来源：被误解的float浮动
2015-10-07
梦浩然 04:05

clearfix

查看全部

0 采集收起来源：清除浮动
2015-10-07
aa伊一 01:51

float设计初衷仅仅是文字环绕效果

查看全部

0 采集收起来源：float的历史
2015-10-05
甘为IT付热血

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

查看全部

0 采集收起来源：float浮动的滥用
2015-10-04
sunshineboy00 01:44

FLOAT的初衷

查看全部

1 采集收起来源：float的历史
2015-10-04
慕斯卡1555144 03:57

display:table?

查看全部

0 采集收起来源：清除浮动
2015-10-03