{"id":20225,"date":"2013-11-03T08:22:00","date_gmt":"2013-11-03T08:22:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/11\/03\/thuoc-tinh-float-dieu-chinh-vi-tri-trong-css\/"},"modified":"2022-08-20T21:37:54","modified_gmt":"2022-08-20T14:37:54","slug":"float-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/float-css\/","title":{"rendered":"Thu\u1ed9c t\u00ednh float \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed trong CSS"},"content":{"rendered":"\n
Thu\u1ed9c t\u00ednh float<\/b> th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed c\u1ee7a \u1ea3nh tr\u00f4i sang tr\u00e1i ho\u1eb7c ph\u1ea3i, khi \u0111\u00f3 text s\u1ebd bao quanh \u1ea3nh. <\/p>\n\n\n\n
Ngo\u00e0i \u1ea3nh th\u00ec float c\u0169ng hay \u0111\u01b0\u1ee3c d\u00f9ng trong b\u1ed1 c\u1ee5c \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh layout c\u1ee7a trang, v\u00ed d\u1ee5 c\u00e1c c\u1ed9t b\u00ean ph\u1ea3i \u0111\u01b0\u1ee3c \u0111\u1ec3 l\u00e0 Gi\u1edd ch\u00fang ta s\u1ebd \u0111i v\u00e0o c\u00e1c v\u00ed d\u1ee5 c\u1ee5 th\u1ec3, \u0111\u1ea7u ti\u00ean khi kh\u00f4ng s\u1eed d\u1ee5ng float cho \u1ea3nh th\u00ec k\u1ebft qu\u1ea3 s\u1ebd nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n N\u1ebfu s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh float cho \u1ea3nh, th\u00ec \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c tr\u00f4i v\u1ec1 m\u1ed9t b\u00ean, c\u00f2n ch\u1eef s\u1ebd bao quanh n\u00f3, nh\u01b0 v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n Code m\u1eabu:<\/p>\n\n\n\n Trong b\u1ed1 c\u1ee5c layout cho trang web<\/a> nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n Theo \u0111\u00f3 c\u00e1c div c\u00f3 t\u00ean left \u0111\u01b0\u1ee3c \u0111\u1ec3 Thu\u1ed9c t\u00ednh clear hay \u0111i c\u00f9ng thu\u1ed9c t\u00ednh float, khi b\u1ea1n s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh n\u00e0y c\u00e1c th\u00e0nh ph\u1ea7n b\u00ean d\u01b0\u1edbi s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p tr\u00f4i l\u00ean bao quanh n\u1eefa. <\/p>\n\n\n\n V\u00ed d\u1ee5 text s\u1ebd tr\u00f4i l\u00ean bao quanh \u1ea3nh \u0111\u01b0\u1ee3c float, nh\u01b0ng n\u1ebfu clear th\u00ec text s\u1ebd \u1edf d\u01b0\u1edbi \u1ea3nh.<\/p>\n\n\n\n C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a clear<\/strong>:<\/p>\n\n\n\n Code m\u1eabu:<\/p>\n\n\n\n C\u00f3 th\u1ec3 b\u1ea1n quan t\u00e2m:<\/p>\n\n\n\n Thu\u1ed9c t\u00ednh float th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed c\u1ee7a \u1ea3nh tr\u00f4i sang tr\u00e1i ho\u1eb7c ph\u1ea3i, khi \u0111\u00f3 text s\u1ebd bao quanh \u1ea3nh. Ngo\u00e0i \u1ea3nh th\u00ec float c\u0169ng hay \u0111\u01b0\u1ee3c d\u00f9ng trong b\u1ed1 c\u1ee5c \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh layout c\u1ee7a trang, v\u00ed d\u1ee5 c\u00e1c c\u1ed9t b\u00ean ph\u1ea3i \u0111\u01b0\u1ee3c \u0111\u1ec3 l\u00e0 float: right \u0111\u1ec3 n\u00f3 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nfloat: right<\/code><\/i> \u0111\u1ec3 n\u00f3 tr\u00f4i v\u1ec1 ph\u00eda ph\u1ea3i.<\/p>\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\nimg {\nfloat: right;\nmargin-left: 10px;\n}<\/code><\/pre>\n\n\n\n
\n\n\n\nfloat: left;<\/code><\/i> c\u00f2n div c\u00f3 t\u00ean right \u0111\u01b0\u1ee3c \u0111\u1ec3
float: right;<\/code><\/i>
<\/i>N\u1ebfu m\u1ed9t y\u1ebfu t\u1ed1 \u0111\u01b0\u1ee3c \u0111\u1ec3 l\u00e0 float th\u00ec c\u00e1c th\u1ebb \u0111\u1ee9ng \u0111\u1eb1ng sau n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c n\u1ed5i l\u00ean tr\u00ean \u0111\u1ec3 bao quanh nh\u01b0ng c\u00e1c th\u1ebb \u1edf tr\u01b0\u1edbc \u0111\u00f3 th\u00ec kh\u00f4ng \u1ea3nh h\u01b0\u1edfng.<\/p>\n\n\n\nC\u00e1c th\u00f4ng tin k\u1ef9 thu\u1eadt<\/h3>\n\n\n\n
float: none;<\/em><\/code><\/li>
float: left;<\/code> th\u00ec c\u00e1c th\u1ebb con ch\u00e1u c\u1ee7a n\u00f3 kh\u00f4ng<\/strong> t\u1ef1 \u0111\u1ed9ng c\u00f3 c\u00f9ng thu\u1ed9c t\u00ednh nh\u01b0 v\u1eady;<\/li>
\n\n\n\nC\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh<\/h2>\n\n\n\n
\n\n\n\nThu\u1ed9c t\u00ednh clear<\/h2>\n\n\n\n
img {\nfloat: left;\nclear: both;\n}<\/code><\/pre>\n\n\n\n