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

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

CSS深入理解之float浮动

                
                张鑫旭
            页面重构设计

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

全部评论问答未解决精华

慕粉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

Nehpets

实验了很多次，总结一下

左浮动，不改变DOM位置的流体布局写法，核心代码是

左侧div: width: 100%; float: left;
右侧div: width: 56px; float: left; margin-left: -56px; <--- 此处的 margin-left，等于右侧 div 自身的宽度 width: 56px

此为固定写法，除此之外的其他代码都只是起美化之用

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

2016-07-29

Nehpets

23333333333 好一个牛逼sp，瞬间记住了空格的写法

1 5-1 float浮动的滥用

2016-07-29

精慕门8611369

我觉得真心不错，别TM喷了，鼓励老师处新作

0 5-1 float浮动的滥用

2016-07-27

cookieee

张老师就是漫画看多了，其实人蛮牛的~静下心认真看他的知识点，其实很深入的，他只是给大家点拨一下，并没有像其他老师那样挨着讲解，细细咀嚼后颁给学生，张老师还留了很多演示的DEMO让学生自己去学习。只是一种全新的方式而已，喜欢思考的人应该会受益匪浅

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

2016-07-27

Rosevil1874

哈哈，被老师圈粉了，好可爱

1 1-1 float的历史

2016-07-26

首页上一页 53 54 55 56 57 58 59 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

CSS深入理解之float浮动