首页手记 css布局相关测试--主要针对浮动知识点

css布局相关测试--主要针对浮动知识点

标签：

Html/CSS JavaScript

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编程练习3-5：类似腾讯软件中心布局</title>
    <style type="text/css">
        body {margin: 0;padding: 0;}
        .wrap {background: #00c;width:960px;margin: 0 auto;}
        .header {background: #FF8040}
        .mainBody {background: #FFFF00;overflow: hidden;}/*left和right都浮动，mainBody不会被撑开，使用overflow:hidden高度自适应*/
        .left {background: #000000;color: #FFFFFF;width:900px;float: left;}
        .right {background: #008000;width: 40px;float: right;}
        .footer {background: #8000FF;clear: both;}/*footer需要清除前面right浮动影响，增加clear:both，避免被文档流加载到上面去*/
    </style>
</head>
<!--
float浮动脱离了标准文档流，其实可以理解为，浮在了标准文档流的上层结构，进行移动。
w3school中对浮动的定义比较准确：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
理解上面两句话，就理解了浮动。
浮动可能产生的意外现象有：
1、由于脱离文档流，所以父容器是不被撑开的，就成了一条线，导致父容器的背景、边框、边距不生效
2、由于普通文档流已经不包括浮动元素，所以会导致浮动元素后面的非浮动元素会无视浮动元素而直接顶上。可能会产生重叠的效果。
对于上面两种情况的处理方法有：
对于父元素的处理，设置父元素的height属性或者overflow: hidden;
对于后续元素的顶上处理，设置后续元素的clear:both,消除它的浮动影响。
-->
<body>
    <div class="wrap">
        <div class="header">头部</div>
        <div class="mainBody">
            <div class="left">我是左侧的内容，不设置高度，自适应！哦我是左侧的内容，</div>
            <div class="right">我是右侧的内容，不设置高度，自适应哦！我是右侧的内容</div>
        </div>
        <div class="footer">版权部分</div>
    </div>
</body>
</html>

点击查看更多内容