Bootstrap笔记(十三) 常用类别 - 文绕图

本文介绍了如何使用Bootstrap实现文绕图效果，包括靠左、靠右和无文绕图的布局。同时，通过添加clear属性展示了如何解除文绕图，确保段落在图片下方。此外，还提及了Bootstrap的响应式文绕图类别，适用于不同屏幕尺寸的布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用类别 - 文绕图

文绕图种类

靠左文绕图 .float-start
靠右文绕图 .float-end
没有文绕图 .float-none

範例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>文繞圖</title>
</head>
<body>
	<!-- 靠左文绕图 -->
    <img src="https://picsum.photos/200/120/?random=1" class="float-start">
    <p>結廬在人境，而無車馬喧。<br>
        問君何能爾，心遠地自偏。<br>
        採菊東籬下，悠然見南山。<br>
        山氣日夕佳，飛鳥相與還。<br>
        此中有眞意，欲辨已忘言。</p>
    
    <!-- 靠右文绕图 -->
    <img src="https://picsum.photos/200/120/?random=2" class="float-end">
    <p>結廬在人境，而無車馬喧。<br>
        問君何能爾，心遠地自偏。<br>
        採菊東籬下，悠然見南山。<br>
        山氣日夕佳，飛鳥相與還。<br>
        此中有眞意，欲辨已忘言。</p>
    
    <!-- 没有文绕图 -->
    <img src="https://picsum.photos/200/120/?random=3" class="float-none">
    <p>結廬在人境，而無車馬喧。<br>
        問君何能爾，心遠地自偏。<br>
        採菊東籬下，悠然見南山。<br>
        山氣日夕佳，飛鳥相與還。<br>
        此中有眞意，欲辨已忘言。</p>
</body>
</html>

文绕图

解除文绕图

可以使用CSS提供的 clear 属性来解除文绕图效果。

範例:

将图片设定为靠左文绕图，理论上，后面的标题与段落(诗句)都应该排在图片的又边，但是因为在段落加上 clear:left 属性解除文绕图，因此只有标题会排在图片的右边，而段落(诗句)则是排在图片下方，不会做文绕图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>解除文繞圖</title>
</head>
<body>
    <div class="container">
        <img src="https://picsum.photos/200/120/?random=1" class="float-start">
        <h2>【飲酒 - 其五】</h2>
        <!-- 清除float效果 -->
        <p style="clear:left;">結廬在人境，而無車馬喧。<br>
            問君何能爾，心遠地自偏。<br>
            採菊東籬下，悠然見南山。<br>
            山氣日夕佳，飛鳥相與還。<br>
            此中有眞意，欲辨已忘言。</p>
    </div>
</body>
</html>