[关闭]
@wangyupu 2020-05-21T06:10:51.000000Z 字数 3607 阅读 24

HTML5+CSS第七章笔记主讲浮动

HTML5+CSS

本章重点

  1. 会使用display属性排版网页元素
  2. 会使用float属性排版网页元素
  3. 会使用float属性创建横向多列布局
  4. 会使用四种防止父级边框塌陷的清除浮动的方法

标准文档流2-2

  1. 准文档流组成
  2. 块级元素（block）
  3. <h1>…<h6>、<p>、<div>、列表
  4. 内联元素（inline）
  5. <span>、<a>、<img/>、<strong>...
  6. #经验
  7. 内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

display属性2-1

  1. | 值        | 说明  |   
  2. | --------   | -----:  | 
  3. | block     | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |  
  4. |inline   |内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符   |   
  5. | inline-block|行内块元素，元素既具有内联元素的特性，也具有块元素的特性  | 
  6. | none | 设置元素不会被显示  | 
  7. 示例：
  8. display:block;
  9. display:inline;
  10. display:inline-block;
  11. display:none;

display特性

  1. 块级元素与行级元素的转变(block、inline)
  2. 控制块元素排到一行（inline-block）
  3. 控制元素的显示和隐藏（none）

块元素排在一行的方法

  1. 可以使用什么属性使块元素排在一行？
  2. inline-block
  3. #float
  4. float属性
  5. 示例:
  6. ……
  7. <body>
  8. <div id="father">
  9.   <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  10.   <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  11.   <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  12.   <div class="layer04">浮动的盒子……</div>
  13. </div>
  14. </body>
  15. </html>

设置左浮动

  1. .layer01 {
  2.     border:1px #F00 dashed;
  3.     float:left;
  4. }
  5. .layer02 {
  6.     border:1px #00F dashed;
  7.     float:left;
  8. }
  9. .layer03 {
  10.     border:1px #060 dashed;
  11.     float:left;
  12. }

设置右浮动

  1. 依次设置layer01和layer02右浮动
  2. 示例：
  3. .layer01 {
  4.     border:1px #F00 dashed;
  5.     float:right;
  6. }
  7. .layer02 {
  8.     border:1px #00F dashed;
  9.     float:right;
  10. }

清除左右浮动

  1. 依次清除文本的左右浮动
  2. .layer04 {
  3.     border:1px #666 dashed;
  4.     font-size:12px;
  5.     line-height:23px;
  6.     width: 200px;
  7.     float: right;
  8.     clear:left;
  9. }
  10. .layer04 {
  11.     border:1px #666 dashed;
  12.     font-size:12px;
  13.     line-height:23px;
  14.     width: 200px;
  15.     float: right;
  16.     clear:right;
  17. }

清除两测浮动

  1. 清除两侧浮动
  2. 示例：
  3. .layer04 {
  4.     border:1px #666 dashed;
  5.     font-size:12px;
  6.     line-height:23px;
  7.     width: 200px;
  8.     float: right;
  9.     clear:both;
  10. }

解决父级边框塌陷的方法4-1

  1. clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？
  2. 浮动元素后面加空div
  3. <div id="father">
  4.   <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  5.   <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  6.   <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  7.   <div class="layer04">浮动的盒子……</div>
  8.   <div class="clear"></div>
  9. </div>
  10. .clear{  clear: both;  margin: 0; padding: 0;}
  11. #设置父元素的高度
  12. <div id="father">
  13.   <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  14.   <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  15.   <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  16.   <div class="layer04">浮动的盒子……</div>
  17. </div>
  18. #father {height: 400px; border:1px #000 solid; }
  19. #父级添加overflow属性
  20. <div id="father">
  21.   <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  22.   <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  23.   <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  24.   <div class="layer04">浮动的盒子……</div>
  25. </div>
  26. #father {overflow: hidden;border:1px #000 solid; }
  27. #溢出处理
  28. overflow属性
  29. | 属性值       |说明   | 
  30. | --------   | -----:  |
  31. |  visible  |默认值。内容不会被修剪，会呈现在盒子之外|
  32. |hidden|内容会被修剪，并且其余内容是不可见的|
  33. |scroll|内容会被修剪，但是浏览器会显示滚动条以便查看其余内容|
  34. |auto|如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容|
  35. #父级添加伪类after
  36. <div id="father" class="clear">
  37.   <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  38.   <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  39.   <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  40.   <div class="layer04">浮动的盒子……</div>
  41. </div>
  42. .clear:after{
  43.     content: '';        /*在clear类后面添加内容为空*/
  44.     display: block;      /*把添加的内容转化为块元素*/
  45.     clear: both;         /*清除这个元素两边的浮动*/
  46. }

小结

  1. 清除浮动，防止父级边框塌陷的四种方法
  2. 浮动元素后面加空div
  3. 简单，空div会造成HTML代码冗余
  4. 设置父元素的高度
  5. 简单，元素固定高会降低扩展性
  6. 父级添加overflow属性
  7. 简单，下拉列表框的场景不能用
  8. 父级添加伪类after
  9. 写法比上面稍微复杂一点，但是没有副作用，推荐使用

inline-block和float的区别

display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

  2. #自我理解
  3. ```html5
  4.  浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
  5. 如何在一行显示多个div元素
  6. 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
  8. div的顺序是HTML代码中div的顺序决定的。
  9. 靠近页面边缘的一端是前，远离页面边缘的一端是后。
  10. div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。
  11.  清除浮动可以理解为打破横向排列
  12.   对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注