CSS深入理解之float浮动_技术问答

首页免费课 CSS深入理解之float浮动问答

CSS深入理解之float浮动

                
                张鑫旭
            页面重构设计

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

全部评论问答未解决精华

慕客学渣会总瓢把子3201537

我很喜欢他的方式。比较有趣。每个人都有风格。我喜欢这种。

1 2-1 float特性-包裹与破坏

2016-08-04

慕粉3767511

66666666666666666666666

1 1-1 float的历史

2016-08-04

VanK

这个老师真得很厉害，现在好像在腾讯上海

2 2-1 float特性-包裹与破坏

2016-08-03

VanK

天哪，原来是这个老师！我看过他的博客，博客的确写得非常好，但是讲课。。。

1 1-2 浮动的原本作用-文字环绕

2016-08-03

慕粉3645086

喜欢老师的风格，老师加油

0 1-1 float的历史

2016-08-02

xue5hen

这个与上一个的一样：父元素p设置margin-right:1px;当其下的float元素宽度大于p的宽度时便会出现这种情况

4 7-4 浮动元素倒数2个浮动最后一个字符重复bug

2016-08-02

xue5hen

经测试：
父元素p设置margin-right:1px;当其下的float元素宽度大于p的宽度时便会出现这种情况。
如果将p元素改为div，则不会出现这种情况。

0 7-3 浮动元素倒数2个莫名垂直间距bug（超过3浮动元素）

2016-08-02

xue5hen

这个好，厉害！

0 6-2 浮动与两侧皆自适应的流体布局

2016-08-01

真理落

作为一个初学者，终于明白最近学习中页面布局的奇怪情况了，原来都是float惹的祸。。。

0 7-1 Float与兼容性

2016-07-31

慕粉3457252

老师你讲的棒棒哒

1 1-1 float的历史

2016-07-30

gdrabbit

老师讲课幽默风趣

2 2-1 float特性-包裹与破坏

2016-07-30

阳光3

老师很棒，加油，支持你！

0 1-1 float的历史

2016-07-29

Nehpets

老师讲了好几种布局，却没有在这里明确各种布局的区别，优缺点，略为遗憾啊
强烈推荐大家去老师博客看这篇文章，各种布局的区别为你一一道来
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

3 6-4 浮动与单侧尺寸固定的流体布局

2016-07-29

Nehpets

/* 下面这个是固定布局写法 */
.mib_feed_fixed { width: 484px; float: right; } <---固定布局写法，右侧的内容无法自适应窗体的宽度变化

/* 下面这个是流体布局写法 */
.mib_feed_flow { margin-left: 76px; } <---比固定布局写法好一些，缺点是，必须知道左侧浮动元素的宽度，在这个里例子中，就是必须要知道头像的宽度56px，加上右侧内容与头像的距离20px，56+20=76px，才能确定 margin-left 的值。所以这个写法无法大规模整站应用。

9 6-4 浮动与单侧尺寸固定的流体布局

2016-07-29

Nehpets

浮动与两侧皆自适应的流体布局，核心代码
左侧div: float: left;
右侧div: display: table-cell; width: 9999px; <---没错width就是 9999px
记得清除浮动
.clearfix {*zoom: 1;}
.clearfix:after {content: ''; display: table; clear: both;}
详细原理参考老师博客
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

8 6-2 浮动与两侧皆自适应的流体布局

2016-07-29

首页上一页 48 49 50 51 52 53 54 下一页尾页

开始学习

课程须知: 既适合学习过CSS基础知识的新手深入学习，也欢迎有经验的小伙伴加深了解噢！

老师告诉你能学到什么？: 通过追溯CSS/HTML发展历史，知道Float出现的原本作用是什么，从而可以帮助我们解答很多疑惑。

微信扫码，参与3人拼团

热搜

最近搜索清空

CSS深入理解之float浮动