Java流程控制01 使用者互動Scanner
阿新 • • 發佈：2022-05-21
問題描述
如果容器高度為 auto，內部元素 A 浮動後會脫標，則容器高度就不會被 A 撐開，就會出現：容器高度塌陷，A 溢位容器外的現象。這種現象叫做：浮動對標準流的影響。
為了讓容器包裹 A,需要清除這種影響，簡稱為清除浮動。
<body> <style> .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } </style> <div class="news"> <img src="https://pic1.zhimg.com/v2-fd403bf2e2057774a0fe83c671039103_xl.jpg?source=32738c0c" /> <p>some text</p> </div> </body>
辦法一：clear 屬性
有 3 種方式：
- 在容器的最末尾新增有 clear 屬性的空元素；
- 給浮動元素的鄰接元素新增 clear 屬性；
- 給容器新增
.clearfix類名，設定.clearfix::after偽元素，給偽元素設定 clear 屬性 。並且給.clear設定zoom: 1觸發 hasLayout。
方式1：推薦（最簡單）：在容器的最末尾新增有 clear 屬性的空元素
<body> <style> .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; /* 清除左右浮動帶來的影響 */ } </style> <div class="news"> <img src="https://pic1.zhimg.com/v2-fd403bf2e2057774a0fe83c671039103_xl.jpg?source=32738c0c" /> <p>some text</p> <!-- 清除浮動（帶來的影響）： --> <!-- 方式 1--> <div class="clear"></div> <!-- 或者--> <!-- <br class="clear"> --> </div> </body>
方式2：給浮動元素的鄰接元素新增 clear 屬性
<body> <style> .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } /* 清除左右浮動帶來的影響 */ .content { clear: both; } </style> <div class="news"> <img src="https://pic1.zhimg.com/v2-fd403bf2e2057774a0fe83c671039103_xl.jpg?source=32738c0c" /> <p>some text</p> <!-- 清除浮動（帶來的影響）：方式 2 --> <div class="content"></div> </div> </body>
方式3：給容器新增.clearfix 類名，設定 .clearfix::after 偽元素，給偽元素設定 clear 屬性 。並且給 .clear 設定 zoom: 1 觸發 hasLayout
<body>
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
/* 清除左右浮動帶來的影響 */
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 觸發 hasLayout */
.clearfix {
zoom: 1;
}
</style>
<div class="news clearfix">
<img src="https://pic1.zhimg.com/v2-fd403bf2e2057774a0fe83c671039103_xl.jpg?source=32738c0c" />
<p>some text</p>
</div>
</body>
辦法二：（推薦）建立 BFC，即給容器設定 overflow: hidden/auto;
<body>
<style>
.news {
background-color: gray;
border: solid 1px black;
/* 清除浮動：原理是建立新的 BFC，利用 BFC 可以包含浮動的特性，讓容器高度包含浮動的子元素 */
/* overflow: hidden; */
overflow: auto;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
<div class="news">
<img src="https://pic1.zhimg.com/v2-fd403bf2e2057774a0fe83c671039103_xl.jpg?source=32738c0c" />
<p>some text</p>
</div>
</body>