見出し画像

CSS : floatをあらためて学習

永沼志保

CSSの float は左右の配置と回り込みを指定します

回り込みとは？

画像と文章のHTMLです
使っている画像は高さ・横600pxです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float:回り込み</title>
</head>
<body>
<p>
<img src = "daruma600.png" alt = "ダルマのイラスト">
私の小学校のあだ名はダルマちゃんです。カワイイあだなで気に入っています。サッカーをしている時にかおりちゃんというお友達が付けた名前です。
</p>
</body>
</html>

HTML

文字は画像の下に表示されています

HTML：画像と文章

  1. float:left; をCSSに書いてみる

@charset "utf-8";
img{
float:left;
}

CSS:float:left;

画像が文字の左側にきました

画像が文字の左側に回り込みました

２．float:right; をCSSに書いてみる

@charset "utf-8";
img{
float:right;
}

CSS:float:right;

画像が右側にきました

画像が文字の右側に回り込みました

この方の記事を参考にあらためて学習し直しました。
結構、間違えて覚えている方、いらっしゃると思います。


この記事が気に入ったらサポートをしてみませんか？