8-CSS布局之浮动布局

文章目录

1 浮动
2 排版方式
- （1）字围现象
- （2）高度塌陷
- - 块级元素父子级，给子级设置浮动，为什么父级会受到影响？
  - 清除浮动
- （3）BFC
- - 两栏自适应布局
  - 三栏自适应布局

1 浮动

浮动布局用来解决块元素在x轴上排列的问题
如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)

可选值：
none，默认值，元素默认在标准流(文档流/普通流)中排列
left，元素会立即   脱离标准流(文档流/普通流)，向页面的左侧浮动
right，元素会立即脱离    标准流(文档流/普通流)，向页面的右侧浮动

2 排版方式

浮动流只有一种排版方式, 就是水平排版。它只能设置某个元素左对齐或者右对齐

注意:
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;

特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是块级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

（1）字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

<style>img{width: 300px;float: left;}span{/* 行内元素浮动后也可以设置宽高 */width: 200px;height: 200px;background-color: red;float: left;}a{float: left;}
</style><body><div class="content"><img src="./images/mayun.jpg" alt=""><span>我是一个span</span><p>1964年9月10日出生于浙江省杭州市，马云的爷爷抗战时做过保长，解放后被划为“黑五类”，取名为“马云”，就是希望马云以后乖巧懂事，少惹是非。12岁时，马云买了台袖珍收音机，从此每天听英文广播，对英语开始感兴趣，13岁起，马云因为打架记过太多，曾被迫转学到杭州八中。之后马云参加中考，考了两年才考上一所极其普通的高中，其中一次数学只得了31分。1982年，马云第一次参加高考，首次落榜，数学只得了1分。马云充满了挫败感，之后他跟表弟到一家酒店应聘服务生，结果表弟被录用，自己惨遭拒绝，老板给出的理由是马云又瘦又矮，长相不好。后来马云做过秘书、搬运工人。马云高考落榜，父亲马来法见他意志消沉，让他蹬三轮给杂志社送书。 [15] 1983年，马云第二次参加高考，再次落榜，数学提高到了19分。马云的父母劝他死了上大学的心，好好学门手艺，之后马云又开始骑着那辆破旧的自行车，穿梭于杭州的大街小巷。1984年，马云不顾家人的极力反对第三次参加高考，这次数学考了89分，但总分离本科线还差5分。由于英语专业招生指标未满，部分英语优异者获得升本机会，马云被杭州师范学院破格升入外语本科专业。进入大学后，马云变成了品学兼优的好学生，凭借出色的英语稳坐外语系前五名。之后马云当选学生会主席，后来还担任了两届杭州市学联主席。 [16] 1988年，马云从杭州师范学院外国语系英语专业毕业，获文学学士学位，之后被分配到杭州电子工业学院（现杭州电子科技大学），任英文及国际贸易讲师。之后马云成为杭州市优秀青年教师，发起西湖边上第一个英语角，开始在杭州翻译界有名气。1992年，由于很多人来请马云做翻译，马云成立海博翻译社，请退休老师做翻译。为生存下去，马云背着大麻袋到义乌、广州去进货，海博翻译社开始卖鲜花，卖礼品，还曾经销售过一年的医药，推销对象上至大医院，下至赤脚医生。1994年，海博翻译社营收持平。其中来自西雅图的外教比尔和马云聊互联网，马云开始寻找机会决定创业。1995年年初，海博翻译社开始赚钱。马云作为翻译来到洛杉矶沟通落实一起高速公路投资未果后。从洛杉矶飞到西雅图找比尔，比尔领马云去西雅图第一个ISP公司VBN参观。 [17] 1995年3月，马云从杭州电子工业学院辞职，自己拿出六、七千元，向妹妹、妹夫借了一万多，凑足了2万元准备创业。1995年4月，中国第一家互联网商业公司杭州海博电脑服务有限公司成立。三名员工是马云、马云夫人张瑛和何一兵。1995年5月，中国黄页正式上线，马云开始从身边的朋友做生意。此时，离中国能上Internet还有3个月。1995年7月，中国黄页为浙江省外宣办做了一个网站，在网上宣传浙江的经济文化，名曰“金鸽工程”。1996年3月，由于杭州电信也做了一个中国黄页，分食市场，马云决定和杭州电信合并。中国黄页作价60万元，占30%股份，杭州电信投现金140万人民币，占70%股份。1997年，在得到外经贸部进京成立中国国际电子商务中心（EDI）邀请后，马云决定放弃中国黄页。他将自己所持的21%中国黄页以每股2、3毛钱的价格贱卖给了公司，拿回10多万元。之后马云和他的团队在北京开发了外经贸部官方网站、网上中国商品交易市场、网上中国技术出口交易会、中国招商、网上广交会和中国外经贸等一系列网站。 [17] 1999年3月，马云正式辞去公职，后来被称为18罗汉的马云团队回到杭州，凑够50万元人民币开始了新一轮创业，开发阿里巴巴网站。1999年4月15日，阿里巴巴网站正式上线。Invest AB副总裁蔡崇信听说阿里巴巴后，飞赴杭州洽谈投资，在和马云谈了4天后，决定辞职加入阿里巴巴。1999年10月和2000年1月，阿里巴巴两次共从软银等国际投资机构融资2500万美元。2003年5月10日，马云创立淘宝网，开始抢夺eBay易趣C2C市场。2003年，尤里·米尔纳第一次访问中国，被别人介绍给了马云。 [18] 2004年12月，马云创立第三方网上支付平台支付宝。2005年8月17日，雅虎宣布以10亿美元现金和雅虎中国全部资产为代价，同时获雅虎10亿美元投资，换取马云创办的阿里巴巴40%的股份和35%的投票权，马云出任中国雅虎董事局主席。2005年，尤里·米尔纳在已经入股京东的情况下，米尔纳具有了跟阿里巴巴创始人马云接触的“圈内资本”，成功出资购入了阿里巴巴个位数比例的股份。 [19] </p></div><input type="text" name="" id="" value="杭州师范学院外语系"><a href="#">1988年毕业于杭州师范学院外语系</a>
</body>

（2）高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱

块级元素父子级，给子级设置浮动，为什么父级会受到影响？

块级元素：宽默认100%，高由本身及子元素内容撑起
子元素设置浮动，脱离文档流，父元素高度无法被撑起
【注意】 浮动流中不区分行内、块级、行内块级元素，都可以实现水平排列普通流/文档流中区分行内、块级

清除浮动

(1)父子级：(解决高度塌陷)1.在子级元素后添加一个空元素，为其添加clear:both  弊端：增加了无意义的元素结构2.给父级元素设置一个overflow:hiddden  解决了第一种方法的弊端3 通过伪元素 ::after清除浮动.father::after{/* 1.添加一个空白的content -> 在父元素后面添加一个空白的元素*/content:'';/* 2. 利用display切换显示模式 */display: block;/* 3.清除浮动 */clear: both;}
(2)兄弟级：给当前元素（被浮动影响的元素）设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。

（3）BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

两栏自适应布局

方法：给固定栏设置固定宽度，给不固定栏开启BFC。

原理：BFC的区域不会与float box重叠

<style>.left{width: 200px;background-color: red;float: left;}.right{overflow: auto;background-color: yellow;}
</style><body><div class="left">左边定宽</div><div class="right">右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应</div>
</body>

三栏自适应布局

两边定宽，中间自适应

<style>*{margin: 0;padding: 0;}.left,.right {width: 200px;height: 200px;background-color: #999;}.left{float: left;}.right{float: right;}.center{/* 中间模块空出左右距离，设置浮动 */margin: 0 200px;background-color: yellow;height: 300px;}
</style><body><div class="left"></div><div class="right"></div><div class="center"></div>
</body>