關於自適應螢幕，設定子元素浮動，父div不能包裹子div，子元素中內容溢位的問題。
阿新 • • 發佈：2019-02-19
設定HTML適應不同解析度的螢幕。
需求結構如下：
HTML結構程式碼如下（只是其中一條）：
<body> <div class="content"><!--用於包裹一條內容--> <div class="img"><img src="../img/03.png"></div><!--放置內容圖片--> <div class="text"><!--放置內容文字--> <div class="title">聊聊天</div> <div class="detail">龍兒可以陪你聊天，但更希望你能找到好友去喝杯咖啡，聊聊生活在這個城市的喜怒哀樂！</div> </div> </div><span style="font-family: Arial, Helvetica, sans-serif;"></div></span><span style="font-family: Arial, Helvetica, sans-serif;"></body></span>
/* css 樣式之一*/ <pre name="code" class="css">@media screen and (min-width:1080px){ .box{ width: 1080px;}.content{width: 1040px;min-height: 190px;} .img{height:180px;} .text{min-height: 180px;} .img{font-size: 48px;line-height: 180px;} .title{font-size: 46px;line-height: 100px;} .detail{font-size: 20px;} }
我對class=content裡面的子元素進行了float，所以兩個div在一行，其它樣式程式碼不再貼出，檢視頁面，效果卻不是我想要的，如下：
第一個content的內容，覆蓋到了第二個content上。原因是我設定了父元素class=text,的高度，在class=detail的div中寫入內容超過了復原的高度，所以溢位了，想要父元素自適應包含元素高度，只需要取消父元素text的高度。如下：
我取消了兩層content和text兩層父元素的高度，內容是包裹了，但是樣式飛了。如下：<pre name="code" class="css">@media screen and (min-width:1080px){ .box{ width: 1080px;}.content{width: 1040px;} .img{height:180px;} .img{font-size: 48px;line-height: 180px;} .title{font-size: 46px;line-height: 100px;} .detail{font-size: 20px;} }
因為我取消了content元素的高度，因為裡面的子元素img和text是浮動的，浮動元素脫離了文件流，所以包圍圖片和文字的div不佔據空間。content沒有高度包裹不了浮動的子元素，所以所有的子元素，浮動到了一起。如下圖：
上圖中，第二容器，在容器中添加了一行，如下，我在結構程式碼中，添加了一行：
<span style="font-size:12px;"><div class="content"><!--用於包裹一條內容-->
<div class="img"><img src="../img/03.png"></div><!--放置內容圖片-->
<div class="text"><!--放置內容文字-->
<div class="title">聊聊天</div>
<div class="detail">龍兒可以陪你聊天，但更希望你能找到好友去喝杯咖啡，聊聊生活在這個城市的喜怒哀樂！</div>
</div>
<span style="background-color: rgb(255, 0, 0);"><div class="clear" style="clear:poth;"></div><!-- 加入不浮動元素 --></span>
</div></span>