浮动与两侧皆自适应的流体布局，CSS深入理解之float浮动教程-慕课网

第1章 Float的历史-知其历史而更知当下
视频：1-1 float的历史(02:40)
编程：1-2 浮动的原本作用-文字环绕

第2章 Float的特性-包裹与破坏
视频：2-1 float特性-包裹与破坏(03:41)

第3章被误解的Float-是魔鬼还是情非得已
视频：3-1 被误解的float浮动(04:17)

第4章清除浮动-究竟是清除浮动还是清除浮动带来的影响？
视频：4-1 清除浮动(05:10)
编程：4-2 clear与margin重叠

浮动与两侧皆自适应的流体布局

老师视频里的不同布局写法，不是习题！！不是习题！！！

任务

把玩就好，把玩就好……

?不会了怎么办

index.html

1
2
<!doctype html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
资料下载
代码

全部精华我要发布

为什么要单独定义一个mib_list的盒子？

最新回答 / 野孤城

<...code...>它这里的话是设定一个内边距，图片和文字上下左右都距框架20px，没设置颜色，所以默认是透明的

1 回答 1284 浏览

2018-10-28

display前的星号是什么意思

最赞回答 / 徐佩里翁

是一种兼容IE的hack写法，你可以看一下这个链接里的东西（http://blog.sina.com.cn/s/blog_576e8b9d0101lv3k.html）。

3 回答 2132 浏览

2018-07-07

假设高度已知，三栏布局，中间自适应，左右两栏固定宽度300px，为什么我的右边的那栏总是在下边？

最新回答 / 蜜思_error

因为div.center是个块元素，当.div.right在设置浮动前位置在div.center后，且在它下面;float之后，从之前的位置开始脱离文档流，因此在下面。

4 回答 1897 浏览

2018-11-08

文字很多的时候，文字会掉到图片下面

最新回答 / 宛在水中沚a

因为文字盒子限制宽高挤下去了吧

1 回答 1383 浏览

2018-01-08

父元素的属性

最新回答 / 吉夫

是指css还是指javascript，css就是在父元素那里添加一个class或者id，然后将其作为选择器来写就行了，javascript有个方法：element.parentNode 返回元素的父节点。具体可以百度

1 回答 1377 浏览

2017-07-26

这个示例最重要的还是怎么让父级元素的有高度?

最新回答 / 破旧的时光机3662066

display: table-cell 会形成bfc就会自动撑开这个不是前面讲了吗

3 回答 1394 浏览

2017-10-10

左边div左浮动，右边div设置display：table-cell，为什么会实现只能布局？

最新回答 / qq_轻抚邂逅_0

右侧display:table-cell,等同于display:inline-block,是一个意义，可以去查下~

1 回答 1646 浏览

2017-01-18

似乎这个width不指定宽度也没什么问题。

最新回答 / 走馬勿观花

我也挺纳闷的，去掉width也不影响兼容，不明意义是什么

2 回答 1011 浏览

2020-03-12

将display：table-cell这行代码注释掉也可以实现效果，求这行代码的好处？

已采纳回答 / _西口褡裢_

display:table-cell会触发BFC,作用是清除浮动影响，例子当中内容少体现不出，当文字足够长你就可以发现文字开始包围图片了（禽兽，放开vivian~）

2 回答 2027 浏览

2017-07-13

id为father的div,原为块状元素（display:block;），独占一行。当{display:table-cell}或{display:inline-block;}时，#father变为行内元素（display:inline-block;），不能独占一行，{margin:0 auto；}就失效了。设计一个左右大小相互适应的布局,css可以参考如下：#father{ width:80%; height:600px; margin:0 auto}#left{ width:20%; height:60...

1 回答 1399 浏览

2016-09-07