CSS深入了解之float浮动

2017-02-26 20:33 SiestaKc 阅读(263) 评论(0) 编辑收藏举报

前记：为了不又把学过的东西给忘记，决定以后把看过的教学资料和视频笔记整理出来，梳理在博客里头，以便日后方便查找完善。

【CSS深入理解】是目前自己结合了慕课网上张鑫旭老师的【CSS深入理解】系列教程和《精通CSS》一书梳理的资料，演示代码也是实操过并验证而插入到博客中，怕的是自己缺根腿的电脑哪天又崩溃导致资料付诸东流不复还....

一、float浮动的原本作用是实现文字环绕效果。

实现浮动的图片会脱离文档流，不再影响不浮动的元素，并且不占据空间。

所以当框1向左浮动时，框2跟随原来的文档流隐藏在框1下方。

元素的block块状化

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动与display:block化</title>
    <style type="text/css">
        .ovh {overflow: hidden; }
                         .red {　
        [hidden] {display: none;}
    </style>
</head>
<body>

<!-- 1、inline-block浮动之后变为块级元素block;

2、js获取display的值在不同浏览器下不同：
var display = this.currentStyle?this.currentStyle.display : window.getComputedStyle(this,null).display;

2、js在不同浏览器下float属性值的设置：
btnShow.style["cssFloat" in this.style? "cssFloat":"styleFloat"]="left";

(IE下对应styleFloat，而其他浏览器下对应的是cssFloat
 用in运算符去检测style是包含该属性。） -->

    <p id="first">这是一个没有设置<code>float</code>属性的按钮:</p>

    <p class="ovh"><input type="button" id="btnShow" value="点击我显示display属性值"></p>

    <p hidden=" ">此时，按钮的display属性值是:<span id="result" class="red"></span></p>

    <p>点击下面的按钮让上面的按钮添加<code>float:left</code>的声明:</p>

    <p><input type="button" id="btnAdd" value="上面的按钮添加float:left"></p>
    <script>

      var btnShow = document.getElementById("btnShow"),
             btnAdd = document.getElementById("btnAdd"),
    result = document.getElementById("result"),
    first = document.getElementById("first");

if (btnShow && btnAdd && result) {
    btnShow.onclick = function() {
        // 获得该按钮的display值
        var display = this.currentStyle? this.currentStyle.display : window.getComputedStyle(this, null).display;
        // 显示结果
        result.innerHTML = display;
        result.parentNode.removeAttribute("hidden");
        // repain fix IE7/IE8 bug
        document.body.className = "any";
    };
    
    // 设置浮动按钮的点击事件
    btnAdd.onclick = function() {
        btnShow.style["cssFloat" in this.style? "cssFloat": "styleFloat"] = "left";
        // 文字描述的变化
        this.value = "上面的按钮已经设置了float:left";
        btnShow.value = "再次点击我确认display属性值";
        first.innerHTML = first.innerHTML.replace("没有", '<del>没有</del>');
        // 结果隐藏
        result.parentNode.setAttribute("hidden", "");
        // 按钮禁用
        this.setAttribute("disabled", "");
    };
}
</script>
</body>
</html>

浮动元素block化

float砌砖布局

【缺陷】

容错性比较糟糕，容易出现问题；
这种布局需要元素固定尺寸，很难重复使用；

二、浮动的特性:①具有包裹性、 ②具有破坏性

包裹性：

1，水平宽度和内容一样，竖直方向上相同。

2，浮动元素里面的东西对外界没有任何影响。

具有包裹性的其他小伙伴:

1，display:inline-block / table-cell / ...
2, position:absolute/fixed/sticky
3, overflow:hidden/scroll

破坏性：会使父级元素坍塌。

1, display:none;
2, position:absolute/fixed/sticky

三、清除浮动的两种方法

第一种：浮动元素底部加入<div>且设置clear:both样式；

第二种：浮动元素的父元素上加入overflow:hidden;样式也可清除浮动

【缺陷】

1，用clear清除浮动，会发生margin重叠现象；

2，则会将浮动元素包裹起来，不会有margin重叠现象。

四、DOM与显示位置匹配的单侧固定布局

实现左浮动，并且不改变DOM位置的流体布局的写法

.mib_full_float{ width:100%; float:left;}
     .mib_feed_flow{ margin-right: 76px;} //在自适应容器外部添加一个标签
.mib_head_l{ width:56px; float:left; margin-left:-56px;}

实现左浮动，改变/不改变DOM位置的流体布局的源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动与右侧尺寸固定的流体布局</title>
<style>

body { font-size: 14px; background-color: #DDF3F7; color: #333; }
a { color: #0082CB; text-decoration: none; }
p { margin: 0; } img { border: 0; }

.mib_body { width: 600px; margin-left: auto; margin-right: auto; }
.mib_x { margin-bottom: 10px; background-color: #fff; }
.mib_list { padding: 20px; overflow: hidden; _zoom: 1; resize: none; }
.mib_resize { overflow: auto; resize: both; }
.mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }

/* 下面这个是右浮动，改变DOM位置的流体布局写法 */
.mib_head_r { width: 56px; float: right; }
.mib_feed_flow { margin-right: 76px; }
/* 下面这个是左浮动，不改变DOM位置的流体布局写法 */
.mib_full_float { width: 100%; float: left; }
.mib_head_l { width: 56px; float: left; margin-left: -56px;}

.mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
.mib_input { width: 70px; padding: 4px; font-size: 100%; }
.mib_btn { width: 70px; padding: 5px; font-size: 100%; }
</style>
</head>

<body>
<div id="mibBody" class="mib_body">
    <div class="mib_x mib_resize">
        <div class="mib_list">
            <a href="http://weibo.com/u/2239745741/home?wvr=5&lf=reg" class="mib_head_r">
                <img title="SiestaKc" src="img/Siesta.jpg">
            </a>
            <div class="mib_feed_flow">
                <p class="mib_sms"><a title="SiestaKc" href="#">SiestaKc<i title="新浪认证" class="mib_vip"></i></a>：五一的假期要去大连找栩子玩，先把机票给敲定了！然后再去北京~~~~~~~~~~~~~~~~好期待见到长城的一砖一瓦和故宫的房檐城墙。。。</p>
                <div class="feed_img"><img src="img/wu.jpg" height="120"></div>
            </div>    
        </div>
    </div>
    <div class="mib_x mib_resize">
        <div class="mib_list">
            <div class="mib_full_float">
                <div class="mib_feed_flow">
                    <p class="mib_sms"><a title="SiestaKc" href="#">SiestaKc<i title="新浪认证" class="mib_vip"></i></a>：五一的假期要去大连找栩子玩，先把机票给敲定了！然后再去北京~~~~~~~~~~~~~~~~好期待见到长城的一砖一瓦和故宫的房檐城墙。。。</p>
                    <div class="feed_img"><img src="img/wu.jpg" height="120"></div>
                </div>
            </div>
            <a href="http://weibo.com/u/2239745741/home?wvr=5&lf=reg" class="mib_head_l">
                <img title="SiestaKc" src="img/Siesta.jpg" heig">
            </a>    
        </div>
    </div>
</div>
</body>
</html>

浮动与右侧固定流体布局

五、浮动与单侧尺寸固定的流体布局

/*固定流体布局写法*/
.mib_feed_fixed { width:484px; float:right;}

/*流体布局写法*/
.mib_feed_follw { margin-left:76px; }

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动与单侧尺寸固定的流体布局</title>
    <style type="text/css">
        body{ font-size: 14px; background-color: #DDF3F7; color: #333; }
        a { color: #0082CB; text-decoration: none; }
        p {margin: 0;}  img{border: 0;}

        .mib_body {width: 600px; margin-left: auto; margin-right: auto;}
        .mib_x {margin-bottom: 10px; background-color: #fff;}
        .mib_list {padding:20px; overflow: hidden; _zoom: 1;}
        .mib_vip{ display: inline-block; width: 10px; height: 11px; margin-left: 1px; background: url(img/icon.png); }

        .mib_head_a {width: 56px; float: left;}
                      /*固定流体布局写法 */
                     .mib_feed_fixed {width:484px; float:right;}
                     /* 流体布局写法 */
                     .mib_feed_follow {margin-left: 76px;}
                     
                     .mib_sms {line-height: 22px; padding-bottom: 6px; font-size: 14px;}
                     .mib_input {width: 70px; padding: 4px; font-size: 100%;}
                     .mib_btn {width: 70px; padding: 5px; font-size: 100%}
    </style>
</head>
<body>
    <div id="mibBody" class="mib_body">
    <div class="mib_x mib_resize">
        <div class="mib_list">
            <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
                <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
            </a>
            <div class="mib_feed_fixed">
                <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
                <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
            </div>    
        </div>
    </div>
    <div class="mib_x">
        <div class="mib_list">
             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
                <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
             </a>    
             <div class="mib_feed_follow">
                    <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
                    <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

浮动与单侧固定流体布局

会员力量，点亮园子希望

刷新页面返回顶部

SiestaKc