CSS学习笔记（三）这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战四、浮动在标准流中，一个

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

四、浮动

浮动的作用：图文混排、分栏布局（依赖浮动与清除浮动）。

在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。而使用“浮动”方式后，块级元素的表现就会有所不同。

浮动的相关属性： float: 设置浮动 clear: 清除浮动元素

float: 定义元素浮动方式，取值：

none（元素不浮动，并会显示在其文本中出现的位置，同时也是浮动属性的默认值）
left: 元素向左浮动（图像或文本浮动在父元素的左边）
right：元素向右移动（图像或文本浮动在父元素的右边）

float 属性定义元素在哪个方向浮动。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动某元素，它会尽可能地窄，仅包裹内部内容，可以指定一个明确的宽度。

1、理解浮动（float）

图文混排—未浮动时

 <div id="container"> <img src=“images/HTML5_Logo.png” alt=“HTML5” width=“128px”>
     <p>标准通用标记语言下的一个应用……</p>
 </div>

图文混排 – 浮动时

 <div id="container"> <img src=“images/HTML5_Logo.png” alt=“HTML5” width=“128px”>
     <p>标准通用标记语言下的一个应用……</p>
 </div>

左浮动：

 #container img {  float: left;}

右浮动：

 #container img {  float: right;}

两处浮动:

 <div id="container"> <img src=“images/HTML5_Logo.png” alt=“HTML5” width=“128px”> <img src="images/css3-512.png"
         alt="CSS3" width="128px">
     <p>标准通用标记语言下的一个应用……</p>
 </div>

 #container img {  float: left;}

2、浮动定位准则

设置了浮动的元素：

会向相应方向浮动至父元素或另一个浮动对象的边界。
浮动元素不再占用原本在文档中的位置。
其后续元素会自动向前填充，遇到浮动对象边界则停止。\

3、clear属性

clear：设置清除浮动方式，取值：

none：允许浮动元素，默认值；
left：清除左侧浮动；
right：清除右侧浮动；
both：清除左、右两侧浮动。

清除浮动

 <div id="container"> <img src=“images/HTML5_Logo.png” alt=“HTML5” width=“128px”>
     <p>标准通用标记语言下的一个应用……</p>
 </div>

 #container img {  float: left;}#container p {  clear: left;}

4、分栏布局

"栏目"—块级元素，可以设置宽度、高度，但块级元素默认是垂直排列的。

利用浮动实现分栏布局 - 思路

利用浮动属性将块级元素水平排列
利用清除浮动属性实现不分栏区域

分栏布局实例

 <body>    
     <div class="wrapper">        
         <header>标题区</header>        
         <aside class="left_sidebar">左侧边栏</aside>        
         <main>主内容区</main>        
         <aside class="right_sidebar">右侧边栏</aside>        
         <footer>页脚</footer>    
     </div>
 </body>

 * {
             margin: 0;
             padding: 0;
         }
 
         body {
             background-color: #cccccc;
         }
 
         .wrapper {
             width: 800px;
             margin: 0 auto;
             background-color:
                 white;
         }
 
         header {
             height: 80px;
             background-color: DARKSEAGREEN;
             color: white;
         }
 
         aside,
         main {
             float: left;
         }
 
         .left_sidebar {
             width: 150px;
             height: 200px;
             background-color: blue;
         }
 
         main {
             width: calc(100% - 250px);
             height:
                 600px;
             background-color: CORAL;
         }
 
         .right_sidebar {
             width: 100px;
             height: 600px;
             background-color: KHAKI;
         }
 
         footer {
             clear: both;
             height: 80px;
             background-color: bisque;
         }

CSS学习笔记（三）