css笔记 - 张鑫旭css课程笔记之 float 篇

https://www.imooc.com/t/197450
float

float的设计初衷/原本作用-是为了实现文字环绕效果
如，一个图片和一段文字垂直放置，给图片加上浮动，文字就环绕图片展示了。

浮动的包裹与破坏

包裹
收缩
坚挺
隔绝 - BFC

具有包裹的其他属性：(是不是可以生成块级上下文的其他属性？)

display: inline-block、table-cell...
position: absolute(近亲)、fixed、sticky
overflow： hidden、scroll

破坏 - 容器被破坏父元素高度塌陷

其他具有破坏属性的属性

display: none
position: absolute/fixed/sticky

总结
浮动是魔鬼
无宽度无图片无浮动

浮动让父元素高度塌陷不是bug而是标准！
浮动的破坏性只是单纯为了实现文字环绕效果而已；

清除浮动
其实是清除浮动带来的影响，浮动还在

基本方法：
1.在浮动元素的父元素底部插入clear:both
浮动元素和外部元素还是会有联系，例如发生margin重叠效果

浮动元素的父元素内部，如果有其他子元素有margin，还是会跑到父元素的外边，导致和父元素其他兄弟元素的margin重叠。

做法：
　　a. 用html， block水平元素底部插入一个空的div元素即可
　　b. 用css, after伪元素，
　　.clearfix:after{}
　　.clearfix{}

2.使父元素BFC(ie8+)或haslayout(ie6/7)
bfc形成一个封闭的结构，保证里边的元素不会对外部发生任何影响，例如浮动带来的影响，也就不会发生margin重叠,

因为bfc所形成的新块，包含内部元素的margin；
具体的区别对比，最清晰的看这个示例：https://www.imooc.com/code/2778

怎么形成BFC?
BFC、haslayout通常声明

float:left/right;
position: absolute/fixed;
overflow: hidden/scroll(ie7+)
display: inline-block、table-cell(ie8+)
width/height/*【zoom:1】/..(ie6/7)

以上，除了zoom:1以外，其他都不能通用，因为让所有元素都float不现实
但是zoom：1只在低版本ie，高版本也不兼容的。

通用清除浮动带来影响的写法：

 .clearfix:after{content:'';clear:both;display:block;height:;overflow:hidden;}

 .clearfix:after{content:'';display:table;clear:both;} //大神推荐写法，与上边任选其一

 .clearfix{*zoom:;}

总结

clearfix只能用在包含浮动元素的父级元素上，滥用会有ie低版本的触发haslayout导致的诡异问题

浮动的特性
1.可以使元素block块状化（元素就像砖头一样一块一块的）
2.破坏性，造成的紧密排列特性（合并回车和空格等）
第一种：
<button></button> 
<button></button> 
<button></button> 
<p>button下边的一行字<p>
使用float后的感觉是：
<button></button><button></button><button></button>   //这就是对浮动的根本作用是实现文字环绕效果的最佳解释了

<p>button下边的一行字<p>

第二种：
<button></button>//看不见的回车
<button></button>//看不见的回车
<button></button>//看不见的回车
使用float后的感觉是：
<button></button><button></button><button></button>
<p>button下边的一行字<p>

具体见老师的demo，更直观https://www.imooc.com/code/2864

借助浮动实现流体布局

1.float之流体布局

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="author" content="郭菊锋 xing.org1^">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>浮动的应用</title>

 </head>

 <body>

   <div class="float overflow-float" style="overflow: hidden;border: 2px solid red;padding: 10px;">

     <span style="color: red">overflow清楚浮动的原理是形成了一个BFC区域，不与外界干扰，可以看最后一个图片的margin-bottom也是包在红线里的</span>

     <h3>浮动的根本作用-文字环绕效果</h3>

     <img style="float:left;margin-right: 10px;" src="http://img.mukewang.com/57466c8e00011b6f06000338-240-135.jpg" alt="">

     <span>张鑫旭css课程笔记 https://www.imooc.com/t/197450 1-float float的设计初衷/原本作用-是为了实现文字环绕效果 如，一个图片和一段文字垂直放置，给图片加上浮动，文字就环绕图片展示了。 浮动的包裹与破坏

       包裹 收缩 坚挺 隔绝 - BFC 具有包裹的其他属性：(是不是可以生成块级上下文的其他人？) display: inline-block、table-cell... position: absolute(近亲)、fixed、sticky

       overflow： hidden、scroll 破坏 容器被破坏 父元素高度塌陷 其他具有破坏属性的属性 display: none position: absolute/fixed/sticky 总结 浮动是魔鬼 无宽度 无图片

       无浮动 浮动让父元素高度塌陷不是bug而是标准！ 浮动的破坏性只是单纯为了实现文字环绕效果而已； 清除浮动 其实是清除浮动带来的影响，浮动还在 基本方法： 1.在浮动元素的父元素底部插入clear:both 浮动元素和外部元素还是会有联系，例如发生margin重叠效果

       -- 浮动元素的父元素内部，如果有其他子元素有margin，还是会跑到父元素的外边，导致和父元素其他兄弟元素的margin重叠。 做法： a. 用html， block水平元素底部插入一个空的div元素即可 b. 用css, after伪元素，

       .clearfix:after{} .clearfix{} 2.使父元素BFC(ie8+)或haslayout(ie6/7) bfc形成一个封闭的结构，保证里边的元素不会对外部发生任何影响，例如浮动带来的影响，也就不会发生margin重叠,因为bfc所形成的新块，包含内部元素的margin；

       具体的区别对比，最清晰的看这个示例：https://www.imooc.com/code/2778 怎么形成BFC? BFC、haslayout通常声明 . float:left/right; . position: absolute/fixed;

       . overflow: hidden/scroll(ie7+) . display: inline-block、table-cell(ie8+) . width/height/*【zoom:1】/..(ie6/7) 以上，除了zoom:1以外，其他都不能通用，因为让所有元素都float不现实

       但是zoom：1只在低版本ie，高版本也不兼容的。 通用清除浮动带来影响的写法： .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;}

       .clearfix:after{content:'';display:table;clear:both;}//大神推荐写法 .clearfix{*zoom:1;} clearfix只能用在包含浮动元素的父级元素上，滥用会有ie低版本的触发haslayout导致的诡异问题

       20180622 浮动的特性 1.可以使元素block块状化（元素就像砖头一样一块一块的） 2.破坏性，造成的紧密排列特性（合并回车和空格等） 第一种：

     </span>

     <img style="float:left;margin-right: 10px;" src="http://img.mukewang.com/57466c8e00011b6f06000338-240-135.jpg" alt="">

     <img style="float:left;margin-bottom: 50px;" src="http://img.mukewang.com/57466c8e00011b6f06000338-240-135.jpg" alt="">

   </div>

   <div style="background-color: #f5f5f5;">

     <span></span>

     <h3>张大神的案例，为了说明clear清楚浮动后，子元素的margin会探出父元素</h3>

     <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;">

     <div style="clear:both; margin-bottom:100px;">clear:both;</div>

   </div>

   <div class="float clearfix" style="border: 2px solid red;padding: 10px;margin-top: 10px;">

     <span></span>

     <h3>一摸一样的实例，但是我给父元素加了个border，奇迹出现了！</h3>

     <style>

       /* .clearfix{

         *zoom: 1;

       }

       .clearfix::after{

         content: "";

         display: table;

         clear: both;

       } */

     </style>

     <img style="float:left;" src="http://img.mukewang.com/57466c8e00011b6f06000338-240-135.jpg" alt="">

     <div style="margin-bottom: 100px;clear:both;">fuyuansu</div>

   </div>

 </body>

 </html>

浮动实现流体布局

2.左头像右详情的流体布局

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>浮动与单侧尺寸固定的流体布局</title>

   <style>

     /* 公共样式 */

     .item{

       padding: 20px;

       margin-bottom: 10px;

       border-bottom: 2px dotted #eee;

     }

     .user-info{

       margin-left: 20px;

       padding: 20px;

       border: 1px dotted #e5e5e5;

     }

     .user-txts{

       margin-bottom: 20px;

     }

   </style>

 </head>

 <body>

     <div class="float clearfix" style="border: 2px solid red;padding: 10px;margin-top: 10px;">

       <div class="item item-me">

         <style>

           /* 我的解法 */

           .item-me .head-img{

             float: left;

             width: 50px;

             height: 50px;

           }

           .item-me .user-info{

             margin-left: 70px;

           }

         </style>

         <div class="head-img">

           <a href="">

             <img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt="">

           </a>

         </div>

         <div class="user-info">

           <div class="user-txts">浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局</div>

           <div class="user-img">

             <img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" alt="">

           </div>

         </div>

       </div>

       <div class="item item-shen">

           <style>

               /* 大神解法 */

               /* 额，，同上 */

               /* 不过他列举的那个不可行的方法是，左边图片左浮动，右边文字块右浮动，然后定个宽度 */

               /* 以下是那个有问题的写法 */

               .item-shen{

                 overflow: hidden;

               }

               .item-shen .head-img{

                 float: left;

                 width: 50px;

                 height: 50px;

               }

               .item-shen .user-info{

                 float: right;

                 margin-left: 70px;

               }

             </style>

           <div class="head-img">

             <a href="">

               <img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt="">

             </a>

           </div>

           <div class="user-info">

             <div class="user-txts">有问题的写法</div>

             <div class="user-img">

               <img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" alt="">

             </div>

           </div>

       </div>

     </div>

 </body>

 </html>

左头像固定，右内容自适应

3.头像在右侧，左侧自适应

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>头像在右侧，左侧自适应</title>

   <style>

       /* 公共样式 */

       .item{

         padding: 20px;

         margin-bottom: 10px;

         border-bottom: 2px dotted #eee;

       }

       .user-info{

         margin-left: 20px;

         padding: 20px;

         border: 1px dotted #e5e5e5;

       }

       .user-txts{

         margin-bottom: 20px;

       }

     </style>

 </head>

 <body>

     <h3>一个头像在右侧，左侧自适应的写法，我想原理应该和右侧自适应一样</h3>

     <div class="float clearfix" style="border: 2px solid red;padding: 10px;margin-top: 10px;">

       <div class="item item-me2">

         <style>

           .item-me2 .head-img{

             float: right;

             width: 50px;

             height: 50px;

           }

           .item-me2 .user-info{

             margin-right: 70px;

           }

         </style>

         <div class="head-img">

           <a href="">

             <img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt="">

           </a>

         </div>

         <div class="user-info">

           <div class="user-txts">浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局浮动与单侧尺寸固定的流体布局</div>

           <div class="user-img">

             <img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" alt="">

           </div>

         </div>

       </div>

       <h3>让dom的顺序和看到的一样该怎么做呢？如下: <span style="color:red;">才发现上边的竟然都没有清除浮动也没有问题</span></h3>

       <div class="item item-me3">

           <style>

             .item-me3{

               overflow: hidden;

             }

             .item-me3 .user-info{

               width: 100%;

               float: left;

               /* margin-right: 20px; */

               margin-left: 0;

               padding: 0;

             }

             .aomiao{

               /* 核心所在 :让出右边头像的宽度和二者边距*/

               margin-right: 70px;

               /* 另外，他干了外边元素干的事，比如间距 */

               padding: 20px;

             }

             .item-me3 .head-img{

               float: left;

               /* 核心2；这个元素想要往那边诺就给那边的margin负值，具体值多少，大概是 左边距=负的宽度-右边元素的border*/

             margin-left: -52px;

             width: 50px;

             height: 50px;

           }

           </style>

           <div class="user-info">

             <div class="aomiao">

               <h3 class="user-txts">奥妙在这里，里边这里又包了一个结构，然后做一个margin-right</h3>

               <h4 class="user-txts">核心2是给左边头像一个左边距=负的宽度-右边元素的border，反正具体值有时候也不一定全等于左边元素的宽度，你就看着调吧，上下左右加减总没错的！</h4>

               <p class="user-txts">奥妙在这里，里边这里又包了一个结构，然后做一个margin-right！！！！！！！！！！！！！！！！！！！！！！凑字数走字数！！！！！！！！！！凑字数走字数凑字数走字数凑字数走字数凑字数走字数凑字数走字数凑字数走字数！！！！！！！！！！！！！！！！凑字数走字数凑字数走字数凑字数走字数凑字数走字数凑字数走字数凑字数走字数凑字数走字数！！！！！！！！！！！</p>

               <div class="user-img">

                 <img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" alt="">

               </div>

             </div>

           </div>

           <div class="head-img">

             <a href="">

               <img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt="">

             </a>

           </div>

         </div>

     </div>

 </body>

 </html>

头像在右侧会用到margin负边距，结构也有变动

4.纯学习：浮动与两侧皆自适应的流体布局-左头像切换大小右边跟着变

 <!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; }

 .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==); }

 .mib_head_a { float: left; margin-right: 20px; }

 /* 下面这个是固定布局写法 */

 .mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

 .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }

 .mib_select { width: 80px; padding: 5px; font-size: 100%; }

 </style>

 </head>

 <body>

   <h3>这个太高级了，我也没弄懂原理，就先照抄大神的代码了。参考学习</h3>

   <h2 style="color: red">这里需要搞明白的是右边部分的样式，display:table-cell;width: 2000px;以及兼容性写法！！</h2>

   <h2 style="color: red">.mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }</h2>

 <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 id="mibHeadImg" title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">

             </a>

             <div class="mib_cell">

                 <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">

             <p class="mib_sms">

                 选择头像的宽度：<select id="minSelect" class="mib_select">

                     <option value="56px">56px</option>

                     <option value="70px">70px</option>

                     <option value="84px">84px</option>

                     <option value="100px">100px</option>

                 </select>

             </p>

         </div>

     </div>

 </div>

 <script>

 var ele_mibSelect = document.getElementById("minSelect"),

     ele_mibHeadImg = document.getElementById("mibHeadImg");

 if (ele_mibSelect && ele_mibHeadImg) {

     ele_mibSelect.onchange = function() {

         ele_mibHeadImg.style.width = this.value;

     };

 }

 </script>

 </body>

 </html>

大神代码

css笔记 - 张鑫旭css课程笔记之 float 篇的更多相关文章

css笔记 - 张鑫旭css课程笔记之 vertical-align 篇
支持负值的属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertic ...
css笔记 - 张鑫旭css课程笔记之 overflow 篇
overflow基本属性值 visible(默认值):超出依然显示 hidden :超出隐藏 scroll :超出,滚动显示.子元素不超出也会有滚动条的那条轨道. auto:如果超出,滚动显示.如果不 ...
css笔记 - 张鑫旭css课程笔记之 line-height 篇
一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置基线是任意线定 ...
css笔记 - 张鑫旭css课程笔记之 padding 篇
[padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) ...
css笔记 - 张鑫旭css课程笔记之 margin 篇
margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器 ...
css笔记 - 张鑫旭css课程笔记之 z-index 篇
一.z-index语法.支持的属性值等 z-index: 在支持z-index的元素上, z-index规定了元素(包括子元素)的垂直z方向的层级顺序, z-index可以决定哪个元素覆盖在哪个元素上 ...
css笔记 - 张鑫旭css课程笔记之 relative 篇
relative地址 relative 对 absolute的限制作用限制left/top/right/bottom(方位值)定位限制描述:absolute设置了方位值时,这些方位值是相对于pos ...
css笔记 - 张鑫旭css课程笔记之 absolute 篇
absolute地址 absolute绝对定位绝对定位与浮动鲜为人知的兄弟关系即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在 ...
css笔记 - 张鑫旭css课程笔记之 border 篇
border地址 border特性: 能形成BFC但是不能清除浮动.但是bfc也是把子元素的margin包裹进来,但是拿自己的margin穿透没办法的. 边框宽度不支持百分比透明border可以突破 ...

随机推荐

Java内存、CPU占用率过高
windows下揪出java程序占用cpu很高的线程并找到问题代码死循环线程代码 linux下查找java进程占用CPU过高原因 Java 占用CPU使用率很高的分析记一次线上Java程序导致服 ...
（资源）OpenStack IRC资源
OpenStack的IRC频道列表如何在浏览器上进入OpenStack的频道(具体的频道可以参考前面的频道列表) 频道聊天日志和会议日志这里我使用mIRC而不是浏览器接入IRC,OpenStack ...
Eclipse的SVN插件移动中文名称文件提示org.tigris.subversion.javahl.ClientException: Bogus URL
今天一个同事使用Eclipse的SVN插件,在"SVN资源库"视图,移动一个中文名称的文件,提示org.tigris.subversion.javahl.ClientExcepti ...
opengl deferred shading
原文地址:http://www.verydemo.com/demo_c284_i6147.html 一.Deferred shading技术简介 Deferred shading是这样一种技术:将光照 ...
Hotspot JVM的常用选项
Hotspot JVM的常用选项选项的分类 Hotspot JVM提供以下三大类选项: 1. 标准选项:这类选项的功能是很稳定的,在后续版本中也不太会发生变化.运行java或者java -help可 ...
用FileExplorer查看android手机中的数据库
想查看一下手机中的通讯录数据库,google之后找到了办法. 参考: http://stackoverflow.com/questions/4867379/android-eclipse-ddms-c ...
python--文件I/O--11
原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 一.打印到屏幕最简单的 ...
已知大小分别为m、n的两个无序数组A、B和一个常数c，求满足A[i]+B[j]=c的所有A[i]和B[j]
方法一:枚举法.该方法是最容易.也是最简单的方法,枚举出数组A和数组B中所有的元素对,判断其和是否为c,如果是,则输出. 方法二:排序+二分查找法.首先,对两个数组中长度较大数组,不妨设为A,排序:然 ...
5 -- Hibernate的基本用法 --1 2 基本映射方式
ORM工具提供了持久化类和数据表之间的映射关系.实际上,所有的ORM工具大致上都遵循相同的映射思路,ORM基本映射有如下几条映射关系: ⊙ 数据表映射类 : 持久化类被映射到一个数据表.程序使用这个持 ...
Go之go与channel组合使用
1,等待一个事件 <-ch 将一直阻塞,直到ch被关闭或者 ch中可以取出值为止所以到第17行之后会去执行go后面的func()匿名函数,在里面给ch赋值后(或者close(ch))后,才 ...

css笔记 - 张鑫旭css课程笔记之 float 篇

css笔记 - 张鑫旭css课程笔记之 float 篇的更多相关文章

随机推荐

热门专题